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导语 


该 系列 教程 是 基于 QtCreator 开 发 环境 的 Qt 入 门 级 教程 。 自 2009 年 10 月 至 今 的 两 年 多 时 间 里 ， 
该 系列 教程 逐渐 完善 ， 已 经 包含 了 Qt 基础 、2D 绘 图 、 数 据 库 和 XML、 网 络 编程 、Qt Quick 等 
最 基本 和 最 常用 的 知识 点 。 从 该 系列 教程 中 衍生 出 的 Qt 专题 教程 和 Qt 系列 开源 软件 ， 分 别 对 
特定 应 用 领域 进行 了 综合 的 讲解 和 应 用 。 现 在 ， 该 系列 教程 的 访问 量 已 经 超过 百 万 ， 基 于 该 
系列 教程 的 《Qt Creator 快 速 入 门 》 和 《Qt 及 Qt Quick 开 发 实战 精 解 》 两 本 书籍 已 经 出 版 。 


为 了 便于 大 家 更 好 的 学 习 和 交流 ， 将 所 有 教程 从 作者 的 博客 网 站 www.yafeilinux.com 全 部 转移 
到 了 Qter 论 坛 (Qter 开 源 社区 www.qter.org) ， 并 将 所 有 内 容 基于 最 新 版 本 的 Qt 重新 编辑 整 
理 。 今 后 ， 教 程 的 内 容 将 会 得 到 进一步 的 扩展 和 更 新 ， 并 会 在 第 一 时 间 推 出 Qt 5 的 内 容 ， 将 
尽 全 力 为 广大 Qt 初学 者 提供 一 套 匈 学 、 详 尽 、 新 阁 的 Qt 教程 


第 一 部 分 学 习 Qt 必 备 知识 


(基于 Qt 4， 主 要 讲解 Widget C++ 编程 ) 


篇 开始 学 习 Qt 与 Qt Creator 


导语 


自从 2009 年 十 月 我 在 博客 上 写 了 第 一 篇 QtCreator 系 列 教程 到 现在 ， 断 断 续 续 一 共 写 了 四 十 八 

篇 ， 涵 盖 了 Qt 基础 、 绘 图 、 数 据 库 、Qt Quick 和 网 络 等 主要 应 用 方面 的 内 容 。 虽 然 其 中 的 内 

容 很 基础 ， 但 这 也 正 是 入 门 的 读者 所 想 要 的 ， 现 在 这 个 系列 的 读者 已 经 超过 了 3 万 ， 很 感谢 大 

家 对 我 的 支持 。 因 为 当时 开始 写 教程 时 并 没有 想 得 那 么 系统 ， 所 以 就 成 了 想到 哪 写 哪 。 在 现 

在 看 来 ， 上 来 第 一 篇 就 是 helloworld 的 编写 ， 从 来 没有 涉及 Qt 的 介绍 ， 感 觉 这 对 于 一 个 Qt 系列 

的 教程 来 说 是 个 缺陷 。 所 以 ， 现 在 我 补 上 了 这 第 零 篇 ， 来 对 Qt 和 Qt Creator 进 行 一 个 大 体 上 的 
介绍 ， 其 实 ， 下 面 的 内 容 都 是 整理 自 Qt 官 方 网 站 。 


因为 Qt Creator 系 列 教程 好 像 有 半年 没有 更 新 了 ， 很 多 网 友 问 我 还 会 不 会 写 下 去 。 这 里 告诉 大 
家 ， 还 是 以 前 的 话 ， 我 们 的 教程 会 一 直 写 下 去 的 ， 直 到 什么 时 候 呢 ? 或许 会 持续 到 Qt 已 经 没 
落 到 无 人 问津 的 时 候 吧 ! 


最 后 再 次 感谢 大 家 对 该 系列 教程 和 我 们 yafeilinux.com 网 站 的 支持 ， 谢 谢 大 家 ! 
-------------------- yafeilinux 2011-2-23 


更 新 信息 : 2012 年 5 月 ， 基 于 该 系列 教程 的 系列 书籍 已 经 出 版 ， 查 看 详情 


Qt 官方 信息 


。 Qt 官网 : http://qt.digia.com/ 

。 Qt 开源 官网 : http://qt-project.org/ 

Qt 最 新 版 本 下 载 : http://qt-project.org/downloads 

Qt 所 有 版 本 下 载 : ftp://ftp.qt-project.org/qt/source/ 

Qt Creator 所 有 版 本 下 载 : ftp://ftp.qt-project.org/qtcreator/ 
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正文 


一 、Qt 与 Qt Creator 简 介 





Qt 是 一 个 跨 平台 应 用 程序 和 UI 开发 框架 。 使 用 Qt 您 只 需 一 次 性 开发 应 用 程序 ， 无 须 重新 编 
写 源 代码 ， 便 可 跨 不 同 桌 面 和 衣 入 式 操作 系统 部 署 这 些 应 用 程序 。 


Qt Creator 是 全 新 的 跨 平台 Qt IDE， 可 单独 使 用 ， 也 可 与 Qt 库 和 开发 工具 组 成 一 套 完整 的 
SDK. 其 中 包括 : 高 级 C++ 代码 编辑 器 ， 项 目 和 生成 管理 工具 ， 集 成 的 上 下 文 相 关 的 帮助 系 
统 ， 图 形 化 调试 器 ， 代 码 管理 和 浏览 工具 。 


二 、Qt 功 能 与 特性 


Code less. 
Create more. 


Deploy everywhere. 


。 直观 的 C++ 类 库 : 模块 化 Qt C++ 类 库 提供 一 套 丰 富 的 应 用 程序 生成 块 (block)， 包 含 了 
构建 高 级 跨 平 台 应 用 程序 所 需 的 全 部 功能 。 具 有 直观 ， 多 学 、 匈 用， 生成 好 理解 、 匈 维 
护 的 代码 等 特点 。 

e。 跨 东 面 和 褒 入 式 操作 系统 的 移植 性 : 使 用 Qt， 您 只 需 一 次 性 开发 应 用 程序 ， 就 可 跨 不 同 
桌面 和 岁入 式 操作 系统 进行 部 署 ， 而 无 须 重 新 编写 源 代 码 ， 可 以 说 Qt 无 处 不 在 
(QtEverywhere) 。 

e 使 用 单一 的 源 代码 库 定 位 多 个 操作 系统 ; 

通过 重新 利用 代码 可 将 代码 跨 设备 进行 部 署 ; 

无 须 考 虑 平台 ， 可 重新 分 配 开发 资源 ; 

代码 不 受 担 忧 平台 更 改 影响 的 长 远 考 虑 ，; 

e@ 使 开发 人 员 专 注 于 构建 软件 的 核心 价值 ， 而 不 是 维护 API 。 

。 具有 跨 平 台 IDE 的 集成 开发 工具 : Qt Creator 是 专 为 满足 Qt 开发 人 员 需 求 而 量 身 定制 的 
跨 平 台 集 成 开发 环境 (IDE) 。Qt Creator 可 在 Windows、Linux/X11 和 Mac OS X 桌面 操 
作 系 统 上 运行 ， 供 开发 人 员 针 对 多 个 桌面 和 移动 设备 平台 创建 应 用 程序 。 

e 在 谋 入 式 系统 上 的 高 运行 时 间 性 能 ， 占 用 资源 少 。 


三 、Qt Creator 功 能 和 特性 





向 开始 学 习 Qt 与 Qt Creator 





tp 


。 复杂 代码 编辑 器 : Qt Creator 的 高 级 代码 编辑 器 支持 编辑 C++ 和 QML (JavaScript)、 上 
下 文 相关 帮助 、 代 码 完 成 功能 、 本 机 代码 转化 及 其 他 功能 。 

e。 版 本 控制 : Qt Creator 汇集 了 最 流行 的 版 本 控制 系统 ， 包 括 Git、Subversion、 
Perforce、CVS 和 Mercurial 。 

e 集成 用 户 界 面 设计 器 : Qt Creator 提供 了 两 个 集成 的 可 视 化 编辑 器 : 用 于 通过 Qt widget 
生成 用 户 界 面 的 Qt Designer， 以 及 用 于 通过 QML 语言 开发 动态 用 户 界 面 的 Qt Quick 
Designer 。 

。 项 目 和 编译 管理 : 无 论 是 导入 现 有 项 目 还 是 创建 一 个 全 新 项 目 ，Qt Creator 都 能 生成 所 
有 必要 的 文件 。 包 括 对 cross-qmake 和 Cmake 的 支持 。 

。 桌面 和 移动 平台 : Qt Creator 支持 在 桌面 系统 和 移动 设备 中 编译 和 运行 Qt 应 用 程序 。 通 
过 编译 设置 您 可 以 在 目标 平台 之 间 快 速 切 换 。 

。 Qt 模拟 器 : Qt 模拟 器 是 诺基亚 Qt SDK 的 一 部 分 ， 可 在 与 目标 移动 设备 相似 的 环境 中 对 
移动 设备 的 Qt 应 用 程序 进行 测试 。 
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}; 
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四 、Qt 的 历史 


。 1996 年 Qt 上 市 


e Qt 已 成 为 数 以 万 计 商 业 和 开源 应 用 程序 的 基础 

e Qt 的 软件 授权 机 制 具有 经 受 市 场 检验 的 双重 授权 (开源 与 商业 ) 模式 

。 Qt Software 的 前 身 为 Trolltech ( 奇 趣 科 技 ) 。 Trolltech ( 奇 趣 科技 ) 始 创 于 1994 年 
。 Trolltech ( 奇 趣 科技 ) 于 2008 年 6 月 被 Nokia 收购 ， 加 速 了 其 跨 平台 开发 战略 

。 2012 年 8 月 芬兰 |T 业 务 供应 商 Digia 全 面 收 购 诺 基 亚 Qt 业务 及 其 技术 


五 、Qt 所 支持 的 平台 


Embedded Windows 


入 式 Linux (Embedded Linux) 


Qt for Embedded Linux® 是 用 于 嵌入 式 Linux 所 支持 设备 的 领先 应 用 程序 架构 。 您 可 以 使 用 
Qt 创建 具有 独特 用 户 体 验 的 具备 高 效 内 存 效率 的 设备 和 应 用 程序 。Qt 可 以 在 任何 支持 Linux 
的 平台 上 运行 。Qt 的 直观 APl， 让 您 只 须 少 数 几 行 代码 便 可 以 更 短 的 时 间 实 现 更 高 端的 功 


能 。 


特点 : 1. 用 于 Linux 的 紧凑 的 视窗 系统 ; 2. 用 于 广泛 的 应 用 程序 处 理 器 的 开发 ; 3. Re 
代码 至 花 入 式 平台 ， 或 通过 重新 编译 ， 反 之 亦 然 ; 4. 编译 移 除 不 常 使 用 的 组 件 与 功能 ; 5. 利 
用 系统 资源 并 实现 本 地 化 性 能 ; 6. 开发 龊 入 式 设 备 犹 如 开发 桌面 系统 一 样 轻松 简单 。 


Qt 除了 提供 所 有 工具 以 及 API 与 类 库 ， ( 如 WebKit ) 外 ，Qtfor Embedded Linux 还 提 
供用 于 最 优化 谋 入 式 开 发 环境 的 主要 组 件 。 


e 紧凑 高 效 的 视窗 系统 (QWS) : Qt 构建 在 标准 的 API 上 ， 应 用 于 在 入 式 Linux 设备 ， 并 带 

有 自己 的 紧凑 视窗 系统 。 基 于 Qt 的 应 用 程序 直接 写 入 Linux 帧 缓冲 ， 解 除了 您 对 X11 视 
窗 系 统 的 需求 。 具 有 减少 内 存 消 耗 ， 占 位 更 小 ， 可 利用 硬件 加 速 图 形 的 优势 ， 可 编译 移 

除 不 常 使 用 的 组 件 与 功能 等 特点 。 

。 虚拟 帧 缓冲 (QVFb) : Qt for Embedded Linux 提供 一 个 虚拟 帧 缓冲 器 ， 可 以 采用 点 对 点 

i 县 有 丨 实 的 测试 构架 ， 在 桌面 系统 上 髋 入 式 测试 ， 模 拟 物 理 

设备 显示 的 宽度 、 高 度 与 色 深 等 特点 。 

进程 间 通 讯 (IPC) : ge 站 程 间 通 讯 ) 可 以 创建 丰富 所 

间 通 讯 的 两 个 主要 概念 即 : 信道 与 消息 。 可 以 进程 并 向 信 

一 个 进程 便 可 创建 信道 。 

扩展 的 字体 格式 : Qt 支持 谋 入 式 Linux 上 的 多 种 字体 格式 ， 包 括 : TrueType@， 

Postscript@Type1 与 Qt 预 呈现 字体 。Qt 扩展 了 Unicode 支持 ， 包 括 : 构建 时 自动 数据 

抽取 和 运行 时 自动 更 新 。 另 外 Qt 还 提供 定制 字体 格式 的 插件 ， 允 许 在 运行 时 轻松 添加 新 

字体 引擎 。 应 用 程序 间 的 字体 共享 功能 可 以 提高 内 存 效率 。 


基本 要 求 : 


多 应 用 程序 用 户 体验 。 定 义 进程 
道 发 送 消息 息 ， 任何 时 候 只 要 到 


e 开发 环境 : Linux 内 核 2.4 或 更 高 ; GCC 版 本 3.3 或 更 高 ; 用 于 MIPS@ GCC 版 本 3.4. 


或 更 高 。 

e 占用 存储 空间 : 存储 空间 取决 于 配置 ， 压 缩 后 : 1.7 - 4.1 MB， 未 压缩 :3.6 -9.0 MB 。 

e。 硬件 平台 : 易于 载 入 任何 支持 带 C++ 编译 器 和 帧 缓冲 器 驱动 Linux 的 处 理 器 。 支 持 
ARM®,x86®, MIPS®, PowerPC® 。 


2. Mac 平台 


Qt 包括 一 套 集成 的 开发 工具 ， 可 加 快 在 Mac 平台 上 的 开发 。 在 编写 Qt 时 ， 并 不 需要 去 设 
底层 处 理 器 的 数字 表示 法 、 字 节 序 或 架构 。 要 在 Apple 平 台 上 支持 Intel 硬件 ，Qt 客户 只 需 Rs 
新 编辑 其 应 用 程序 即 可 。 


3. Windows 和 平台 


使 用 Qt， 只 需 一 次 性 构建 应 用 程序 ， 无 须 重 新 编写 源 代 码 ， 便 可 跨 多 个 Windows 操 作 系 统 的 
版 本 进行 部 署 。Qt 应 用 程序 支持 WindowsVista、Server 2003、XP、NT4、Me/98 和 
Windows CE 。 


4 Linux/X11 平 对 


Qt 包括 一 套 集成 的 开发 工具 ， 可 加 快 在 X11 平台 上 的 开发 。Qt 由 于 是 KDE 桌面 环境 的 基 
础 ， 在 各 个 Linux 社区 人 尽 丝 知 。 几 乎 KDE 中 的 所 有 功能 都 是 基于 Qt 开发 的 ， 而 且 Qt 是 
全 球 社 区 成 员 用 来 开发 成 千 上 万 的 开源 KDE 应 用 程序 的 基础 。 


5 . Windows CE/Mobile 


Qt 是 用 C++ 开发 的 应 用 程序 和 用 户 界面 框架 。 通 过 直观 的 API， 您 可 以 使 用 Qt 为 大 量 的 设 
备 编写 功能 丰富 的 高 性 能 应 用 程序 。Qt 包括 一 套 丰 富 的 工具 集 与 直观 的 API|， 意 味 着 只 须 少 
数 几 行 代码 便 可 以 更 短 的 时 间 实 现 更 高 端的 功能 。 


主要 特点 : 1. 硬 件 依存 性 极 小 ; 2. 支 持 多 数 现 有 的 Windows CE 配置 ; 3. 对 于 自 定 义 的 硬件 
配置 亦 轻松 构建 ; 4. 移植 桌面 代码 至 诅 入 式 平台 ， 或 通过 重新 编译 ， 反 之 亦 然 ; 5. 编译 移 除 
不 常 使 用 的 组 件 与 功能 ; 6. 利用 系统 资源 并 实现 高 性 能 ; 7. 开 发 能 入 式 设 备 尤 如 开发 桌面 系 
统一 样 轻松 简单 。 


除了 提供 所 有 工具 以 及 AP| 与 类 库 外 ，Qtfor Windows CE 还 提供 用 于 最 优化 歼 入 式 开 
es 的 附加 功能 。 


e 本 地 化 和 可 定制 的 外 观 : Qt 在 使 用 时 ， 可 以 支持 Windows Mobile 和 Windows CE 两 种 
样式 。 在 运行 时 ，Qt 应 用 程序 将 检测 使 用 哪 一 种 样式 。 采用 Qt 样式 表单 ， 您 只 需要 花 
费用 于 传统 UI 风格 的 少许 时 间 和 ， 便 可 以 轻松 定制 您 的 应 用 程序 外 观 。 特 点 : 基 
于 HTML 层 司 式样 式 表 (CSS) ; 适用 于 全 部 widget ; 任何 熟悉 CSS 技术 的 人 员 都 可 以 定 
义 复 杂 的 样式 。 

。 先进 的 文本 布局 引擎 : Qtfor Windows CE 支持 TrueType@ 和 点 阵 字 体 。 同 时 Qt 还 支持 
扩展 的 Unicode 和 从 右 至 左 的 书写 语言 。Qt 的 富 文本 引擎 增加 了 新 的 功能 用 于 复杂 的 文 
本 布局 ， 包 括 制 表 和 路 径 追 踪 ， 以 及 环绕 图 形 的 文本 。 


大 大 AAA 


第 0 篇 开始 学 习 Qt 与 Qt Creator 


基本 要 求 : 


。 开发 环境 : Microsoft@ Visual Studio@ 2005 (Standard Edition) 或 更 高 ActivePerl 。 
e。 占用 存储 空间 : 紧凑 配置 - 4.8 MB， 全 配置 -8.4 MB。 

。 操作 系统 : Windows CE 5 或 更 高 ，Windows Mobile 5 或 更 高 。 

。 硬件 平台 : 支持 ARM®, x86® ， (在 SH4@ 和 MIPS@ 上 编译 ) 。 


6 塞 班 平台 (Symbian ) 

Qt 通过 和 S60 框架 的 集成 为 Symbian 平台 提供 了 支持 。 在 最 新 版 的 QtSDK 1.1 中 我 们 可 以 直 
接生 成 可 以 在 塞 班 设备 上 运行 的 sis 文件 。 

7 . MeeGo 平 台 (Maemo 6 现 更 名 为 MeeGo) 

Qt 是 一 个 功能 全 面 的 应 用 程序 和 用 户 界 面 框架 ， 用 来 开发 Maemo 应 用 程序 ， 也 可 跨 各 主要 
设备 和 桌面 操作 系统 部 署 这 些 程序 且 无 需 重 新 编写 源 代 码 的 。 如 果 您 在 多 数 情况 下 开发 适用 
于 Symbian、Maemo 或 MeeGo 平台 的 应 用 程序 ， 可 以 使 用 免费 LGPL 授权 方式 的 Qt。 

Qt 将 为 诺基亚 设备 运行 MeeGo (Harmattan) 提供 依托 ， 并 可 为 所 有 即将 推出 的 MeeGo 设备 
中 的 应 用 程序 开发 提供 API， 为 Qt 开发 人 员 提 供 了 更 多 平台 。 不 久 ，MeeGo 设备 就 会 完全 
支持 (X11) Qt 。 


六 、Qt 类 库 


模块 化 Qt C++ 类 库 提 供 一 套 丰 富 的 应 用 程序 生成 块 (block)， 包 含 了 生成 高 级 跨 平 台 应 用 程序 
所 需 的 全 部 功能 。 





OpenGL® Webkit 

Scripting Multimedia 
Networking XML 

Database Unit Testing 


Multithreading 2D ee a si Declarative 


1 先进 的 图 形 用 户 界面 (GUI) : QI 为 您 在 虽 面 与 说 入 式 平台 上 开发 先进 的 GUI| 应 用 程序 ， 
带 来 所 有 需要 的 功能 。Qt 使 用 所 支持 平台 的 本 地 化 图 形 API， 充 分 利用 系统 资源 并 给 予 应 用 程 
序 本 地 化 的 界面 。 


e 从 按钮 和 对 话 框 到 树 形 视图 与 表格 都 具有 完整 的 控件 〈 窗 体 ) 
。 自动 缩放 ， 字 体 、 语 言 与 屏幕 定位 识别 布局 引擎 

。 支持 抗 锯齿 、 夭 量变 形 以 及 可 缩放 拓 量 图 形 (SVG) 

e 具有 样式 API 和 窗 体 样式 表 ， 可 完全 自 定 义 用 户 界 面 


。 支持 谋 入 式 设备 的 硬件 加 速 图 形 和 多 重 显示 功能 


2 基于 OpenGL @ 与 OpenGL @Es 的 3D 图 形 : OpenGLG@ 是 一 个 标准 的 图 形 库 ， 用 于 构建 跨 
平台 和 支持 硬件 加 速 的 高 性 能 可 视 化 应 用 程序 。 虽 然 DpenGL 完 美 支持 3D 图 形 ， 但 却 不 支持 
创建 应 用 程序 用 户 界 面 。Qt 通 过 与 OpenGL 的 紧密 集成 解决 了 这 一 难题 。 


。 在 您 的 应 用 程序 中 轻松 加 入 3D 图 形 

。 在 区 入 式 Linux 与 Windows CE 平台 上 使 用 OpenGL ES 和 OpenGL 绘 画 引 擎 
e 利用 系统 资源 实现 最 佳 图 形 性 能 

。 支持 Windows 平台 上 的 Direct3D® 


3 多 线程 : 多 线程 编程 是 一 个 执行 资源 密集 型 操作 而 不 会 冻结 应 用 程序 用 户 界面 的 有 效 典 
范 。Qt 的 跨 平 台 多 线程 功能 简化 了 并 行 编 程 ， 另 外 它 附加 的 同步 功能 可 以 更 加 轻松 地 利用 多 
核 架 构 。 


e 管理 线程 、 数 据 和 对 象 更 加 轻松 
。 基于 Qt 的 信号 与 构 ， 实 现 跨 线 程 类 型 安全 的 对 和 象 间 通讯 
高 端 API 可 以 编译 多 线程 程序 而 无 须 使 用 底 端 基 元 


4 齿 入 式 设备 的 紧凑 视窗 系统 : Qt 构建 在 标准 的 API 基 础 上 ， 用 于 具有 轻 量 级 window 系 统 的 
谨 入 式 Linux 设备 。 基 于 Qt 的 应 用 程序 直接 写 入 Linux 帧 缓冲 ， 解 除了 您 对 X11 视窗 系统 的 


。 减少 内 存 消 耗 ， 内 存 占 用 更 小 

e。 可 以 编译 移 除 不 常 使 用 的 组 件 与 功能 

e@ 可 以 利用 硬件 加 速 图 形 

。 在 虽 面 系统 上 的 虚拟 帧 缓冲 可 用 于 谋 入 式 开发 与 调试 


5 . 对 象 间 通讯 : 在 开发 用 户 图 形 界 面 中 ， 一 个 常见 的 、 重 复发 生 系统 崩溃 与 问题 的 症结 根源 
是 如 何在 不 同 组 件 之 间 进 行 通信 。 对 于 该 问题 ，Qt 的 解决 方案 是 信号 与 楼 机 制 ， 即 执行 
Observer 设计 模式 。 我 们 可 以 简单 理解 为 当 特殊 事件 发 生 的 时 候 ， 信 号 就 被 发 出 了 ， 一 个 插 
槽 就 是 一 个 函数 ， 被 称 作 特定 信号 的 响应 。 


e 信号 与 楼 机 制 是 类 型 安全 的 (type safe) 
e。 任意 信号 都 可 以 连接 任意 或 多 个 插 档 ， 或 跨 多 个 线程 
。 简化 盖 正 的 组 件 编程 
6 .2D 图 形 : Qt 给 您 提供 一 个 功能 强大 的 2D 图 形 画布 ， 用 以 管理 和 集成 大 量 的 图 形 元 素 。 
。 高 精度 可 视 化 大 量 元 素 
e。 将 窗 体 互动 详 入 至 图 形 场 景 中 
e。 支持 缩放 、 旋 转 、 动 画 与 变换 


7 多 媒体 框架 : Qt 使 用 


Phonon 多 媒体 框架 为 众多 的 多 媒体 格式 提供 跨 桌 面 与 诅 入 式 操作 系统 的 回放 功能 。Phonon 可 
以 轻松 将 音频 与 视频 回放 功能 加 入 到 Qt 应 用 程序 当中 ， 并 且 在 每 个 目标 平台 上 提取 多 媒体 格 
式 与 框架 。 


e 以 平 立 的 方式 提供 多 媒体 内 容 
e 从 本 地 文件 读 取 媒 体 或 读 取 网 络 上 的 流 媒 体 
e 提取 Mac 上 的 QuickTime@ ，Windows 上 的 DirectShow@ 以 及 Linux 上 的 Gstreamer 


8 . WebKit 集 成 : Qt WebKit 集 成 ， 即 Qt 集成 了 WebKit 功 能 ，WebKit 是 KDE 项 目下 基于 
KHTML 的 开放 源 web 浏 览 器 引擎 。 目 前 Apple®@，Google™ 与 Nokia 等 公司 使 用 Qt WebKit 集 
成 o 

。 将 web 与 本 地 内 容 和 服务 整合 在 单一 的 富 应 用 程序 当中 

。 快速 创建 整合 实时 web 内 容 与 服务 的 应 用 程序 

e 使 用 集成 在 本 地 代码 中 的 HTML 与 Java Script 


e。 完全 控制 跨 平台 的 浏览 器 环境 
9 网 络 连 接 : Qt 让 您 网 络 编程 更 简单 ， 并 支持 跨 平 台 网 络 编程 。 


e。 完整 的 客户 /服务 器 插口 提取 
。 支持 HTTP，FTP，DNS 与 异步 HTTP 1.1 
。 无 论 HTML 和 XML 或 图 象 与 媒体 文件 ， 它 都 可 以 存 取 所 有 类 型 的 数据 


10 . XML : Qt 为 XML 文件 以 及 SAX 和 DOM 协议 的 C++ 实现 ， 提 供 了 一 个 流 媒体 文件 读 写 
器 。 同 时 Qt 还 包含 了 XQuery 一 一 个 简单 的 类 似 SQL 的 查询 语言 ， 用 于 解析 XML 文件 来 选择 
和 聚合 所 需要 的 XML 元 素 ， 并 且 将 它们 转换 成 XML 输出 或 其 它 格式 的 输出 。 


。 仅 需 少数 几 行 代码 便 可 实现 先进 的 XML 查询 
。 完全 支持 XQuery 1.0 和 XPath 2.0 
e 在 您 自己 的 应 用 程序 中 从 XML 查询 、 抽 取 和 转换 数据 


11. 脚本 引擎 : Qt 包含 一 个 完全 集成 ECMA 标准 的 脚本 引擎 。 QtScript 提供 QObject 集 
成 ， 把 Qt 的 信号 与 槽 机 制 整合 成 脚本 ， 并 且 实 现 了 C++ 与 脚本 的 集成 。 


基于 ECMA 标准 的 脚本 语言 (ECMAScript 3 是 JavaScript1.5 的 基础 ) 


。 为 简化 的 对 象 间 通讯 使 用 Qt 的 信号 与 槽 机 制 
。 开创 新 的 契机 将 脚本 与 您 的 Qt 应 用 程序 相 集成 


12 . 数据 库 : Qt 帮助 您 将 数据 库 与 您 的 Qt 应 用 程序 无 颖 集成 。Qt 支 持 所 有 主要 的 数据 驱动 ， 
并 可 让 您 将 SQL 发 送 到 数据 库 服务 器 ， 或 者 让 Qt SQL 类 自动 生成 SQL 查询 。 


。 支持 所 有 主要 的 数据 库 驱 动 
。 以 多 种 视图 或 数据 识别 表单 方式 显示 数据 


七 、Qt Quick 介 绍 


Qt Quick 是 在 Qt4.7 中 被 引进 的 一 项 技术 。Qt Quick 是 一 种 高 级 用 户 界面 技术 ， 开 发 人 员 和 设 
计 人 员 可 用 它 协同 创建 动画 触摸 式 用 户 界 面 和 应 用 程序 。 它 由 三 部 分 构成 : 1.QML : 像 
JavaScript 一 样 的 声明 式 语言 ; 2. Qt Creator : 在 Qt IDE 中 的 直观 工具 ; 3. Qt Declarative : 
强大 的 C++ 模块 。 





1 主要 组 成 : 


。 QML : 基于 JavaScript 的 直观 语言 : QML 是 一 种 简便 易 用 的 语言 ， 开 发 人 员 与 用 户 界 
面 设计 人 员 无 需 任何 C++ 知识 ， 即 可 用 其 描绘 出 用 户 界面 的 外 观 和 功能 。 

。 面向 开发 人 员 和 设计 人 员 的 共享 工具 : Qt Creator IDE2.1 版 将 集成 一 套 开 发 人 员 与 用 户 
界面 设计 人 员 可 共享 ， 用 以 创建 和 实施 Qt Quick 项 目的 通用 工具 。 

e 通过 C++ 推动 QML 应 用 程序 : 在 Qt 库 中 的 全 新 Declarative 模块 支持 生成 动态 可 定制 
的 用 户 界面 ， 以 及 通过 C++ 拓展 QML 应 用 程序 。 


2 功能 特点 : 


。 快速 开发 动画 式 流畅 多 变 的 用 户 界面 : 通过 直观 的 QML 语言 和 一 套 丰富 的 
QMLEIements 一 一 UI 和 行为 生成 块 一 一 您 可 以 快速 创建 出 令 人 印象 深刻 的 用 户 界面 ， 上 比 
您 想象 的 还 要 快 。 

。 无 需 C++ 知识 : 如 果 您 具有 JavaScript 的 经 验 或 掌握 基本 的 网 络 技术 (如 HTML 和 
CSS)， 您 就 可 以 通过 QML 取得 非常 不 错 的 成 果 。 

e 瞄准 数 以 百 万 计 的 触摸 屏 设 备 : 使 用 Qt Quick， 您 可 以 为 数 以 百 万 计 的 Symbian 和 
MeeGo 设备 生成 应 用 程序 ， 或 为 各 种 类 型 的 触摸 屏 消费 类 电子 设备 创建 用 户 界 面 。 


3 应 用 领域 : 


。 汽车 信息 娱乐 系统 Ul: Cybercom Group 的 用 户 界 面 设计 人 员 与 开发 人 员 尝试 使 用 Qt 
Quick 为 其 汽车 信息 娱乐 平台 设计 UI 一 一 并 取得 了 令 人 满意 的 结果 。 

e 社交 媒体 电视 : mixd.tv 使 用 Qt Quick 为 其 跨 平 台 网 络 电视 应 用 程序 创建 UI， 其 用 户 可 
以 通过 社交 媒体 频道 访问 和 共享 在 线 视频 的 内 容 。 

e 联网 汽车 : Qt 的 认证 合作 伙伴 Digia 很 快 学 会 了 Qt Quick 并 用 其 创建 出 了 包括 导航 、 电 
话 、 游 戏 和 音乐 功能 的 高 级 汽车 U1。 


入 、Qt 授 权 


Flexible Licensing Qt Services 
GPL LGPL, Commercial Support, Training, Consulting 


Qt Commercial Developer License 


The Qt Commercial Developer License is the correctlicense to use for the development of 
proprietary and/or commercial softwarewith Qt where you do not want to share any source 
code. 


You must purchase a Qt Commercial DeveloperLicense from us or from one of our 
authorized resellers before you startdeveloping commercial software as you are not 
permitted to begin yourdevelopment with an open source licensed Qt version and convert to 
thecommercially license version at a later . The Qt Commercial Developer Licenseincludes a 
restriction that prevents the combining of code developed with theQt GNU LGPL v. 2.1 or 
GNU GPL v. 3.0 license versi with commerciallylicensed Qt code. 


Qt GNU LGPL v. 2.1 Version 


This version is available for development ofproprietary and commercial applicati in 
accordance with the terms andconditi of the GNU Lesser General Public License version 
2.1. 


Support services are available separately forpurchase. 
Qt GNU GPL v. 3.0 Version 


This version is freely available for the developmentof open source software governed by the 
GNU General Public Licenseversion 3.0 (GPL”). 


Support services are available separately forpurchase. 


License Comparison Chart 


Commercial LGPL GPL 
License fee charged No license fee No license fee 
Must 
岂 Source code 
source No, modificati can be Source code must be 
must be 
code closed : provided 
provided 
changes to 
Qt 
ar orate Yes, in No, applicati are subject 
pe ea Yes - No source code accordance to the GPL and source 
P P y must be disclosed with the LGPL code must be made 
applicati 
Vv. 2.1 terms available 
Yes, iImmediate notice 
Updates sent to those with a valid Yes, made 
Yes, made available 
provided support and update available 
agreement 
Yes, to those with a valid Not included Not included but 
but available 
Support support and update available separately for 
separately for 
agreement purchase 
purchase 
Charge for Yes, for some embedded 
2 No No 
Runtimes USes 


九 、Qt 5 简介 


Introducing 


Qt s.0 


One framework to rule them all 





Qt 5 是 进行 Qt C++ 软件 开发 基本 框架 的 最 新 版 本 ， 其 中 Qt Quick 技 术 处 于 核心 位 置 。 同 时 Qt 
5 能 继续 提供 给 开发 人 员 使 用 原生 QtC++ 实 现 精妙 的 用 户 体验 和 让 应 用 程序 使 用 
OpenGIl/OpenGL ES 图 形 加 速 的 全 部 功能 。 通 过 Qt 5.0 提 供 的 用 户 接口 ， 开 发 人 员 能 够 更 快 的 
完成 开发 任务 ， 针 对 触摸 屏 和 平板 电脑 的 UI 转 变 与 移植 需求 ， 也 变 得 更 加 容易 实现 . 


2012 年 12 月 19 日 ，Digia 宣 布 正式 发 行 Qt 5.0。Qt 5.0 是 一 个 全 新 的 流行 于 跨 平台 应 用 程序 和 
用 户 界 面 开发 框架 的 版 本 ， 可 应 用 于 桌面 、 嵌 入 式 和 移动 应 用 程序 。Qt 5 在 性 能 、 功 能 和 易 
用 性 方面 做 了 极 大 的 提升 ， 并 将 于 明年 可 完全 支持 Android 和 iOS 平台 。Digia 明 确 表 明 要 使 
Qt 成 为 世界 领先 的 跨 平台 开发 框架 。Qt 5 在 这 个 过 程 中 具有 重要 的 意义 ， 它 为 应 用 程序 开发 


人 员 和 产品 用 户 提供 了 最 好 的 用 户 体验 。Qt 5 极 大 地 简化 了 开发 过 程 ， 让 他 们 能 够 更 快 地 为 多 
个 目标 系统 开发 具有 直观 用 户 界 面 的 程序 。 它 还 可 以 很 平滑 的 过 度 到 新 的 开发 模式 来 满足 触 
摸 屏 和 Tablet 的 需求 。 


Qt 5 的 主要 优势 包括 :图 形 质 量 ;中 低 端 硬件 上 的 高 性 能 ; 跨 平 台 移 植 性 ;支持 C++ 11; QtWebKit 
2 支持 的 HTML5 ; 大 幅 改 进 QML 引 擎 并 加 入 新 的 API ; 易 用 性 并 与 Qt4 版 本 兼容 。 


。 出 色 的 图 像 处 理 与 表现 能 力 : Qt Quick 2 提供 了 基于 GL 的 工作 模式 ， 它 包括 一 个 粒子 系 

ee 系列 着 色 效 果 集 合 。Qt Quick 2 让 复杂 图 形 的 细腻 动画 和 变形 处 理 变 得 更 加 容 
， 也 确保 了 低 端 架构 中 2D 和 3D 效 果 的 平滑 泻 染 效果 和 在 高 端 架构 中 一 样 的 出 色 。 

. i JavaScript 和 QML 在 保证 对 C++ 基础 和 Qt Widget 支 持 上 发 挥 着 重 
要 作用 。Qt Webkit 2 中 一 部 分 功能 就 在 使 用 或 者 正 考虑 通过 HTML 5， 彻 底 的 改变 Qt 

e。 跨 平 台 的 移植 变 得 更 加 简单 : 对 于 OS 开 发 人 员 来 说 ， 由 于 基础 模块 和 插件 模块 采用 了 新 
的 架构 ， 以 及 Qt 跨 平 台 性 的 继续 强化 ，Qt 已 经 能 够 运行 在 所 有 的 环境 中 了 。 而 我 们 的 下 
一 步 计 划 : 全 面 的 支持 iOS 和 Android 系 统 ， 现 在 正在 如 火 如 茶 的 开发 中 。 


Qt 通过 使 用 OpenGL ES， 大 大 的 增加 了 交付 令 人 印象 深刻 的 图 形 的 能 力 (OpenGL ES 是 一 
个 专门 为 谨 入 式 系统 和 移动 设备 而 制定 的 图 形 应 用 程序 编程 接口 ) 。 1 
具有 绚丽 动画 效果 的 2D、3D 图 形 应 用 ,这 些 应 用 在 各 种 性 能 级 别 的 奉 入 式 设备 上 得 到 平滑 
行 。 例 如 手机 、 平 板 电脑 和 低 成 本 的 开发 平台 包括 Raspberry Pi。 Qt5 新 的 模块 化 oe 
使 得 Qt5 的 跨 平台 移植 性 变 得 更 简单 。 它 包含 了 要 点 模块 组 和 附加 模块 组 ,这 种 设计 会 减 小 系 
统 代码 库 的 尺寸 。 整 合 的 Qt 平台 抽象 层 还 强调 跨 平台 移植 性 ， 开 发 人 员 可 以 通过 启用 开发 简 
便 性 为 多 个 目标 部 署 。Qt 支持 所 有 主要 的 桌面 操作 系统 ,包括 Windows,Mac OS X 和 Linux。 
入 式 操作 系统 包括 谋 入 式 Linux、Windows 嵌入 式 以 及 最 广泛 部 署 实时 操作 系统 的 诅 入 式 
设备 一 一 VxWorks、Neutrino 和 INTEGRITY 和 流行 的 移动 操作 系统 等 等 。Qt WebKit 2 集成 
浏览 器 引擎 ， 允 许 轻 松 集成 web 内 容 和 应 用 程序 。 它 将 使 HTML5 、 感觉 轻松 自如 ， 
基于 Qt WebKit 2， 能 够 开发 出 兼顾 响应 能 力 和 本 地 代码 强大 功能 的 混合 应 这 些 应 用 可 以 
提供 大 量 的 动态 内 容 。 


只 需要 一 个 简单 的 重新 编译 ， 就 可 以 直接 迁移 之 前 为 Qt4 开发 的 应 用 程序 。 


Ri 
由 


对 于 Qt 和 Qt Creator 有 了 大 致 的 了 解 了 ， 已 经 迫不及待 想 马上 开始 Qt 的 学 习 了 吧 ! 那么 从 我 
们 的 Qt Creator 系 列 教程 开始 吧 ， 让 你 快速 进入 Qt 的 开发 行列 之 中 ! 


第 1 篇 基础 (一 ) Qt 开发 环境 的 搭建 和 hello world 
导语 


从 这 一 篇 我 们 正式 开始 Qt 编程 。 本 篇 主要 讲解 Qt 编程 环境 的 搭建 。 为 了 适应 大 多 数 读者 的 需 
要 ， 同 时 为 了 避免 系统 环境 的 不 同 而 产生 不 必要 的 问题 ， 这 里 选择 使 用 Windows 系 统 的 Qt 版 
本 。 因 为 在 前 面 几 十 篇 中 我 们 主要 讲解 基本 Qt 控件 项 目的 桌面 编程 ， 所 以 没有 使 用 SDK 进 行 
安装 ， 而 是 采用 了 Qt 库 与 Qt Creator 分 别 下 载 安 装 的 方式 ， 这 样 就 只 需要 下 载 Qt 的 桌面 版 本 的 
库 。 而 SDK 中 默认 集成 了 Qt Creator 和 Qt 桌面 库 以 及 Qt 移动 开发 的 库 ， 这 个 会 在 第 40 篇 至 第 
50 篇 进行 讲解 。 再 者 ， 鉴 于 Qt 一 次 编写 代码 ， 多 次 编译 运行 的 特点 ， 在 我 们 教程 中 讲解 的 例 
子 都 是 可 以 直接 在 其 他 系统 环境 下 (比如 Linux 系 统 ) 直接 编译 运行 的 。 


环境 : Windows 7 + Qt 4.8.1+ Qt Creator 2.4.1 


目录 


。 一 、Qt 及 Qt Creator 的 下 载 和 安装 
。 二 、 创 建 hello world 程 序 

e@ 三 、 发 布 程序 

e 四 、Qt 工 具 介 绍 

e。 五、 附录 


正文 

一 、Qt 及 Qt Creator 的 下 载 和 安装 

1 下载 

(已 过 时 ) 

下 载 Qt 4.8.1 : ftp://ftp.qt-project.org/qt/source/qt-win-opensource-4.8.1-mingw.exe 

下 载 Qt Creator2.4.1 : ftp://ftp.qt-project.org/qtcreator/qt-creator-win-opensource-2.4.1.exe 
最 新 下 载 地 址 : (已 过 时 ) 

所 有 版 本 的 Qt 下 载 地 址 : ftp://ftp.qt-project.org/qt/source/ 

所 有 版 本 的 Qt Creator 下 载 地 址 : ftp://ftp.qt-project.org/qtcreator/ 


最 新 下 载 地 址 : http://download.qt-project.org/ 
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其 中 snapshots 里 面包 含 了 最 新 测试 版 本 ; official releases 里 面包 含 了 官方 发 布 版 ， 即 最 终 发 
布 版 ; archive 里 面 是 Qt4.7 及 以 前 版 本 ，Qt Creator2.5 及 以 前 版 本 。 


更 新 (2013-5-1 已 过 时 ) 


提示 : 在 最 近 的 Qt Creator 版 本 (2.5.0 及 以 后 ) 中 已 经 默认 不 再 包含 MinGW ， 需 要 自己 手动 
下 载 安装 。 可 以 在 这 里 下 载 。 ( 注 : 最 新 的 Qt 5 版 本 中 已 经 默认 包含 了 Qt Creator 和 MinGW ， 
需 根 据 自己 实际 情况 操作 。 


官方 原文 如 下 : 
Notefor Windows MinGW Users 


Wedecided to remove the custom MinGW distribution and MinGW gdb from our 
QtCreator-only Windows binary distribution package. The original reas toinclude it there 
(it was the predecessor of the Qt SDK) are since a while nowfiled by the Qt SDK. Also， 
updating the shipped version is a legal hassle aslong as the binaries are provided 
through Nokia, but we also don't want to shipstone age versi. We are working on build 
infrastructure for the Qt Projectitself though, that we ultimately want to use to build Qt 
Creator packages,snapshots, and more. Currently on http:Wbuilds.qt-project.org , you 
find QtCreator snapshots for Linux and Windows, and also a Python enabled MinGW 
gdb(that reportedly doesnt work on Windows XP). lt's still possible to installMinGW and 
gdb separately and register them in Qt Creator. Weare not removing the support for it 
from Qt Creator. 


Previouslyshipped MinGW: ftp://ftp.qt.nokia.com/misc/MinGW-gcc440 1.zip 


Previously shipped MinGW gdb: ftp://ftp.qt.nokia.com/misc/gdb/7.2/9qtcreator-gdb-7.2- 
mingw-x86.zip 


Upto date MinGW: http:/www.mingw.org (we might provide acompact version like the 
one in the old installer later) 


Python enabled MinGW gdb 7.4: http://builds.qt-project.org/job/gdb-windows/ 
(compiledon Windows 7, doesnt work on Windows XP) 


更 新 : 2014-10-1 


在 安装 Qt 4.8.6 及 以 后 的 Qt 4 版 本 时 ， 应 该 按照 安装 时 的 提示 来 下 载 相应 版 本 的 MinGW， 不 然 
编译 程序 无 法 运行 。 例 如 Qt 4.8.6 安 装 时 的 提示 如 下 图 。 
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WAQt OpenSource d4.8.6 Setup 


MinGW Installation 


This package requires MinGW' with GCC 4,8,2 (686-posix-dwarf), Please specify a directory 
where to find the installation (for instance' CIMimnGw， 


IF you do not have MinGW with GCC 4,8,2 installed, you can download 
i686-4.8,2-release-posix-diwarf-rt_v3-rey3,7z from 


sourceforge,net MinGWW-w64 toolchains targetting Win32 


Find installed MinG 风 











可 以 直接 点 击 提示 给 的 链接 来 下 载 。 也 可 以 从 这 里 下 载 。 
更 新 : (关于 Qt 4.8 搭 配 Qt Creator 2.5 以 后 版 本 的 MinGW 和 无 法 调试 的 情况 ，2013-7-1) 


注意 : Qt 5 以 后 版 本 默认 包含 了 所 有 需要 的 工具 ， 不 存在 这 里 的 情况 ， 直 接 下 载 安装 即 可 使 
用 |! 


1: MinGW 


如 果 是 Qt 4 版 本 ， 需 要 使 用 GCC 4.4， 也 就 是 MinGW 需 要 是 4.4 版 本 的 ， 其 他 新 的 版 本 均 不 可 
用 。 


下 载 : http://pan.baidu.com/share/link?shareid=1521902020&uk=2352291552 


备用 地 址 : http://builds.qt-project.org/job/mingw32- 
windows/lastSuccessfulBuild/artifact/mingw32-qtproject.7z 


2 调试 器 GDB 

在 Qt 4.8 版 本 ， 需 要 下 载 并 指定 GDB 才 能 正常 调试 。 

下 载 地 址 : http://origin.releases.qt-project.org/gdb/ 或 到 社区 下 载 页 面 进行 下 载 

从 这 里 面 根据 自己 的 系统 来 下 载 合适 的 版 本 。 

下 载 完 MinGW 和 GDB 以 后 ， 将 其 解压 到 Qt 的 安装 目录 中 ， 比 如 这 里 都 解压 到 了 CQt 目 录 中 。 


3 在 Qt Creator 中 的 设置 。 我 们 需要 先 在 编译 器 中 添加 并 制定 gcc 的 路 径 ， 例 
如 c:\Qt\mingw32\bin\gcc.exe 如 下 图 所 示 : 
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4 手动 设置 
MinGw MinGw 








名 称 : NinGwW| 
编译 器 路 径 C): CiAQtmingw32AbinvEgcc. exe 
Platform codegen flags: 


Flatform linker flags: 





ABI: [x88-windows-msys-pe-32bit "| x86 了 |-|windows v|-|msys 了 |-|pe v |-|32bit v 





然后 在 Qt 版 本 中 添加 并 指定 qmake 的 路 径 ， 如 下 图 所 示 。 





名 称 qmake 路 径 添加 ... 
自动 检测 帅 除 
4 手动 设置 


Qt 4.8.5 (4.8.5) CNQt\4.8.5\bin\qmake.exe 
清理 














版 本 名 称 : Qt 4.8.5 (4.8.5) 


qmalke 路 径 : C:AQtAd.8.5Abinkqnmake exe 浏览 ... 
桌面 的 Qt 版 本 4.8.5 详情 
助手 : QWL Damp。 详情 


最 后 在 构建 套件 中 添加 并 指定 编译 器 、 调 试 器 和 Qt 版 本 。 如 下 图 所 示 。 
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概要 | 构建 套件 (kit) | Qt 版 本 | 编译 器 | CHske | 











名 称 添加 
自动 检测 蕊 并 | 
4 手动 设置 
Desktop? (We) 暗 除 
设置 为 默认 






选择 目录 里 面 的 gdb-i686- 
pc-mingw32.exe 














引擎 EE): [cnB 引擎 =] 












































名 称 : EE 
设备 类 型 : 
设备 : 本 二 ai Nanage | 
Sysroot: - 浏览 . .. 
编译 器 : [MinG% | (管理 .| i ee 
调式 器 : 6DB 引擎 使 用 “C:\Qt\atcreator-gdb-7. 4-NINGW32_HT-6. 1-i686\gdb-i686-pc-mingx32. exe” 自动 检测 “| [jpn i 
Qt 版 本 : [Qt 4.8.5 (4.8.5) | (管理 .| 
Qt mkspec: 
2 女 角 


下 载 完成 后 先 安装 QtCreator， 采 用 默认 选项 即 可 ， 安 装 路 径 推荐 使 用 默认 的 C 盘 ， 因 为 这 样 
可 以 与 教程 中 的 一 致 ， 在 以 后 的 内 容 中 可 以 避免 一 些 不 必要 的 问题 。 然 后 安装 Qt 库 ， 当 在 选 
择 mingw 目 录 时 ， 需 要 设置 为 前 面 安装 的 Qt Creator 目 录 下 的 mingw 目 录 。 如 下 图 所 示 。 


MinGW Installation 





This package requires MinGW with GCC 4,4, Please specify a directory where to find the 
installation (for instance: C:VWMinGW)， 


If you do not have MinGW with GCC 4.4 installed, you can download it from the Customer 
Portal: 
http://qt.nokia.com/downloads 


Find installed MinGW 


Mullsoft Install System v2,46 








二 、 创 建 hello world 程 序 


1 运行 Qt Creator 从 桌面 上 的 快捷 方式 打开 Qt Creator， 进 入 眼帘 的 是 Qt Creator 的 欢迎 界 
面 。 如 下 图 所 示 。 
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Qt Creator 
ED | 


打开 质 目 . . 时 需 目 最 新 新 闻 





一 Comsele AFI 


| Debaggiag Qt Quick 2 


Building and Running an Exanple™ Creating a Qt Quick Application™™ 和 
w= Ot Labs Bieg 


EE Qt Quick brings a lot of 
flexibility snd spasd to 
developanant. Traditieonally 
ene had to ao the "compils, 
package, deploy, run” cycle 
oveT nd over saganin, whereas 
with Qt Quick you ean nov do 
imerenental changes to your 
Source aven at runtinel In Qt 
Creator, we are trying to 
leversse the Power of Qt 


Quick [...]) 
A 人 BS 


You can test that your installation is This tutorial describes how to use Qt 

successful by opening an existing exanple Croator to create a snall Qt application, 

application project, Battery Status, that uses the Systen 
Infornation Mobility API to fetch battery 
infornation fron the device. The user 
interface for the application is""” 


Creating a Qt Quick Application Creating a Qt Wideet Based 一 
大 多 入 部 


Dowere wenme 一“ 
Be Me epee ee 











ME ED EITZY NET 


Qt Creator 分 为 了 七 个 模式 : 欢迎 模式 、 编 辑 模式 、 设 计 模 式 、 调 试 模式 、 项 目 模式 、 分 析 模 
式 和 帮助 模式 ， 分 别 由 左 侧 的 七 个 图 标 进 行 切 换 ， 对 应 的 快捷 键 是 ctrl + 数字 1 到 7。 现 在 
显示 的 就 是 欢迎 界面 ， 这 里 可 以 看 到 一 些 入 门 教程 、 开 发 的 项 目 列表 、Qt 提 供 的 示例 程序 ， 
也 可 以 创建 或 打开 一 个 项 目 。 


2 创建 项 目 


我 们 使 用 欢迎 页 面 上 方 的 “创建 项 目 ” 按 钮 来 创建 新 的 项 目 (当然 也 可 以 在 文件 菜单 中 创建 项 
目 ) 。 在 项 目 模板 中 选择 Qt 控件 项 目 ， 然 后 选择 QtGui 应 用 ， 这 样 便 会 生成 一 个 一 般 的 桌面 
Qt 图 形 界 面 项 目 ， 如 下 图 所 示 。 其 他 项 目的 创建 会 在 后 面 的 教程 中 讲 到 。 











Cn 包含 一 个 基于 Qt 设计 师 的 主 窗 


预选 一 个 可 用 的 Qt 点 面 版 本 用 于 编译 程序 。 





然后 更 改 项 目 名 称 和 路 径 ， 这 里 名 称 可 以 设置 为 helloworld ， 注 意 名 称 和 路 径 上 都 不 要 有 中 
文 。 如 下 图 所 示 。 


项 目 介绍 和 位 置 
本 向 号 将 创建 一 个 Qt4 GUI 应 用 项 目 ， 应 用 程序 默认 妊 承 自 Qkpplication 并 且 包 含 一 个 空白 的 窗 体 。 





名 称 ; helloworld 





部 嫂 路 径 : F; 
国 设 为 NA 的 工程 路 径 





点 击 下 一 步 后 ， 会 弹出 目标 设置 对 话 框 ， 这 里 显示 没有 有 效 的 Qt 版 本 ， 并 提示 需要 在 工具 / 选 
项 菜单 中 进行 设置 。 如 下 图 所 示 。 下 面 我 们 就 来 添加 Qt 版 本 。 


26 


置 
四 目标 没有 有 效 的 Qt 版 本 . 
详情 请 添加 Qt 版 本 在 工 局/ 活 师 或 者 使 用 3 党 9 管理 工具 . 


汇总 





[TF-$% | 
3 . 关联 Qt 库 


因为 我 们 这 里 是 分 别 下 载 Qt Creator 和 Qt 库 的 方式 ， 所 以 安装 后 它们 并 没有 关联 ， 这 样 是 无 法 
编译 程序 的 。 下 面 在 Qt Creator 中 关联 Qt 库 。 打 开工 具 一 选项 菜单 ， 然 后 选择 “构建 和 运行 "一 
项 ， 再 进入 Qt 版 本 选项 卡 。 如 下 图 所 示 。 






































我 们 可 以 手动 设置 Qt 版 本 的 关联 ， 现 在 点 击 右上 角 的 “添加 "按钮 ， 然 后 会 让 选择 qmake.exe 文 
件 ， 我 们 在 Qt (不 是 Qt Creator) 安装 目录 的 bin 目 录 中 找到 该 文件 并 打开 。 如 下 图 所 示 。 
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让 计算 机 WIN7(C:) > Qt ， 4.8.1 » bin 

















版 本 名 称 : W481 HH 
eke 路 径 : 6:\at\4,8, 1\bin\ gnake. exe 
Qt 版本 4.8.1 为 虎 面 


助手 : WL 提 职 . 

















当 设 置 完 Qt 版 本 ， 再 次 回 到 欢迎 界面 后 ， 可 以 发 现 “ 演 示 和 范例 "中 已 经 显示 出 了 各 种 示例 程 
序 ， 大 家 可 以 打开 自己 需要 的 一 个 例子 。 这 个 我 们 先 不 进行 讲解 ， 下 面 继续 来 完成 hello world 
程序 。 
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(一 ) Qt 开发 环境 的 搭建 和 hello world 





1 工具 (T) ” 窗 体 (W) 帮助 (H) 


最 新 新 闻 


Debaggiag Qt Quick 2 
一 Console AFI 


2D Paintin 
Ba 9¢ [aiz Meg 


Qt Quick Brings a lot of 
leribility snd sp4sd to 
developanant. Traditienally 
30 Pehl on je ond OpenOL, MARS . 5 ome had to do the “ceapile, 
package, deploy, run” cycle 
eyeT and over ganin, whereas 
with Qt Quick you can nov do 
imerenental changes to your 
Source aven st runtinel In Qt 
Creator, we are trying to 
leverogse the powar of Qt 


Quick [...]) 
td df 





The 2D Painting exanple shovs hov QPainter This deao shows hov to visualize 3 huge 
and QcLYidget can be used together to scene with 40000 chip itens using Graphics 
Gisplay accelerated 20 eraphics on Yiew. It also shows Graphics Viev’s 
supported hardvare. powerful navigation and interaction 
features, alloving you to zoon and rotate 
euch of four views irdependently, snd"" 


Address Book Exanple Address Book 








4 完成 hello world 项 目 

还 按照 前 面 的 流程 创建 项 目 ， 在 目标 设置 页 面 默 认 选 择 为 了 桌面 Qt 版 本 ， 因 为 现在 我 们 只 关 
联 了 这 一 个 桌面 版 本 的 Qt 库 ， 所 以 只 能 编译 为 桌面 程序 。 如 下 图 所 示 。 这 里 可 以 选中 "使 用 影 
子 构建 "， 这 样 编译 生成 的 文件 会 和 源码 分 别 存放 ， 这 个 在 下 面 的 内 容 中 会 看 到 。 











四 Qt Gui 应 用 








目标 设置 
Qt Creator 可 以 为 本 程 hellowerl1d 设 黑 加 下 目标 


局 清点 面 





他 对 构建 设置 | 为 每 个 Qt 版本 分 别 建立 一 个 调式 版 本 和 一 个 发 布 版 本 ~ | 
加 使 用 影子 构建 
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第 1 篇 基础 (一 ) Qt 开发 环境 的 搭建 和 hello world 


点 击 下 一 步 ， 在 显示 的 类 信息 中 将 基 类 选择 为 apialog ， 就 是 说 我 们 将 程序 设置 为 了 一 个 对 
话 框 ， 然 后 将 类 名 更 改 为 MyDialog 。 如 下 图 所 示 。 


mydialoe bh 


mydialog pp 


> mydialog ui 





再 点 击 下 一 步 进入 汇总 页 面 ， 这 里 可 以 选择 版 本 控制 系统 ， 我 们 这 里 没有 用 到 ， 所 以 不 进行 
设置 ， 点 击 完成 按钮 来 完成 项 目的 创建 。 如 下 图 所 示 。 





为 当前 硕 目 建立 一 个 子 项 目 ; [E> 


添加 至 版 本 近 制 有 统 名 5 和] 





要 添 加 的 文件 
F:\helloworld: 


main.cpp 
mydialog. cpp 
mydialog.h 
mydialog. ut 
hellioworid.prd| 


RR |] MW]| 





5 ' 编辑 运行 项 目 


创建 完 项 目 后 会 进入 编辑 模式 ， 这 里 可 以 对 项 目 文件 进行 查看 和 编辑 。 左 侧 是 项 目 文件 的 列 
这 行 分 类 显示 。 除 了 显示 项 目 文件 ， 还 

可 以 通过 下 拉 菜 单 来 选择 类 视图 、 大 纲 等 内 容 。 在 右 侧 就 是 代码 编辑 区 域 ， 这 里 对 关键 字 
辣 


高 亮 显 示 。 如 下 图 所 示 。 


进 
进 


麻 秽 


第 1 篇 基础 (一 ) Qt 开发 环境 的 搭建 和 hello world 


文件 (F) ”六 锅 (E) “构建 [6) 育 汇 (D) 分 析 (A) ZNMD 窗 钵 (W) 。” 帮 婴 (H) 


Fa 让 ay7dialog pp 到 ByTialegf- -站 yDialegn 
4 BS holloworld $include "mydialog.h" 
六 helloworid,pro #include "ui mydialog.h" 
MyDialog: :MyDialog (QNidoer “parene) : 


QDialog (Parenc), 
(Dew Ul: :MyDialocog) 


CE-=>3eTtUpPUL (chi) 


4 MyDialog: :~MyDialog() 
{ 
delere V4? 
} 


打开 文档 
mydialog.cpp 








EE EE ET EES 


我 们 双击 界面 文件 中 的 mydialog.ui 文件 ， 进 入 设计 模式 。 在 这 里 可 以 对 界面 进行 可 视 化 设 
计 ， 也 就 是 所 见 即 所 得 。 左 侧 的 是 一 些 常用 部 件 ， 可 以 直接 拖 动 到 界面 上 ; 右 侧 是 对 象 和 类 
列表 ， 下 面 是 部 件 的 属性 编辑 窗口 ; 在 中 间 ， 上 方 是 主 设 计 区 域 ， 显 示 了 窗口 的 主 界面 ， 下 
面 是 Action 编 辑 器 以 及 信号 和 模 编 辑 器 窗口 。 


我 们 从 左 侧 部 件 列表 中 找到 Label 标 签 部 件 并 拖 动 到 界面 上 ， 然 后 双击 ， 更 改 其 显示 文本 
为 “helloworld”， 如 下 图 所 示 。 
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第 1 篇 基础 (一 ) Qt 开发 环境 的 搭建 和 hello world 


Te 
~ myd 


文件 () ”六 独 (E) “构建 [6) 育 试 (D) 分 析 (A) 工具 (T 宣 钵 (W) 帮助 (H) 


内 国 诈 室 同和 和 江 


A Plain Text Edit 

国 Spin Box EF 

加 Double Spin Box thello vorldl 
© Time dr 

七 Date Ed 

二 Oate/Time edit 


靖 Dial 


ED Horizortal Scroll Bar 


目 Vertical Scrol Bar 

和 Horizontal Slider 

宁 Vertical Sider 

[2 Display Widgets 
RY Label 

Ey Text Browser 

i Graphics View 





142) Calendar 
图 co Number 


骂 Horizontal Une 

I Vertical Une 

QDeclarativeView 一 一 一 = 

@ owebview -| Actiont 局 模 尖 | 信号 和 宰 注 辑 革 | 





对 象 = 
4 也 MyDialog QDialog 
label YY QLabel 


> geometry  {(140, 120) 161 x 61] 

» sizePolicy IPreferred, Preferred... 
> minimumSi... 0x0 

> maxirmums,,. 16777215 x 16777215 





下 面 我 们 单 击 Qt Creator 左 侧 的 > 运行 按钮 来 编译 运行 程序 ， 这 时 会 弹出 保存 修改 对 话 
框 ， 如 下 图 所 示 。 这 里 选中 “构建 之 前 总 是 先 保存 文件 ”， 然 后 点 击 保存 所 有 文件 按钮 。 


以 下 文件 有 未 保存 的 修改 : 





mydialog.u! FA\helloworld 





构建 之 前 总 是 先 保存 文件 
保存 所 有 文件 





最 后 hello world 程 序 成 功 运行 ， 效 果 如 下 图 所 示 。 
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第 1 篇 基础 (一 ) Qt 开发 环境 的 搭建 和 hello world 





三 、 发 布 程序 
1 . 查看 工程 目录 


这 里 会 发 现 多 了 一 个 helloworld-build-desktop-Qt 4 8 1 4 81 目录 ， 里 面 存放 的 就 是 编 
译 生成 的 文件 。 这 就 是 前 面 创建 项 目 讲 到 的 “使 用 影子 构建 ”， 如 果 没 有 选中 这 个 ， 那 么 生成 
的 文件 就 会 和 源码 在 同一 个 目录 里 。 该 目录 的 内 容 如 下 图 所 示 。 





文件 (R)” 编 贺 (E) “查看 (V) 工具 (T) ”帮助 (H) 
组 织 v 包含 到 麻 中 v 共享 ” 刻录 新 建文 件 突 


组 由 
debug release Makefile Makefile.D Makefile.R ui_mydialo 
ebug elease gh 





这 里 有 两 个 目录 : debug 和 release ， 分 别 用 于 存放 debug 方 式 和 release 方 式 编译 生成 的 可 
执行 文件 。 因 为 编译 时 默认 是 debug 版 本 ， 所 以 现在 release 目录 中 是 空 的 。 打 开 debug 目 
录 ， 可 以 看 到 生成 的 可 执行 文件 helloworld.exe 如 下 图 所 示 。 
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第 1 篇 基础 (一 ) Qt 开发 环境 的 搭建 和 hello world 


文件 (F) ” 编 贺 (E) ”查看 (V) 工具 (T) ”帮助 (H) 
组 织 了 包 合 到 麻 中 v 共享” 刻录 新 建文 件 实 


区 下 载 ec 

= 

是 最 近 沪 问 的 位 置 | helloworld main.o mocmydi mocmydi mydialog. 
.exe alog.cpp alog.o o 


学 库 
器 视频 








此 时 双击 helloworld.exe 文件 ， 会 弹出 系统 错误 提示 框 ， 表 明 丢 失 了 mingwm10.d11 文件 。 如 
下 图 所 示 。 


无 法 启动 此 程序 ， 因 为 计算 机 中 丢失 mingwm10.dll。 将 试 重新 安装 该 
程序 以 解决 此 问题 。 





其 实 我 们 可 以 在 Qt 安装 路 径 下 找到 该 文件 ， 我 这 里 是 在 c:\Qt\4.8.1\bin 中 ， 将 其 复制 

到 debug 目录 里 面 ， 然 后 还 会 提示 缺少 其 他 几 个 dl 文件， 依次 将 它们 复制 过 来 即 可 。 完 成 
后 helloworld.exe 就 可 以 运行 了 。 其 实 也 可 以 先 设置 环境 变量 ， 以 后 在 本 机 就 可 以 直接 运行 
生成 的 可 执行 文件 了 ， 这 个 可 以 参考 下 面 的 附录 。 


2 . 编译 release 版 本 程序 


可 以 看 到 debug 版 本 的 可 执行 文件 需要 的 dll 文 件 是 很 大 的 ， 因 为 其 中 包含 了 调试 信息 。 而 我 们 
实际 发 布 软件 是 使 用 的 release 版 本 ， 下 面 我 们 就 来 编译 release 版 本 的 helloworld 程 序 。 如 果 
前 面 关 闭 了 Qt Creator， 那 么 需要 在 Qt Creator 中 再 次 打开 helloworld 项 目 ， 可 以 从 欢迎 模式 的 
开发 页 面 中 打开 最 近 使 用 的 项 目 ， 也 可 以 从 开始 菜单 中 打开 ， 还 可 以 将 源码 目录 中 的 .pro 文 件 
直接 拖 入 到 QtCreator 来 打开 。 


然后 将 版 本 设置 为 release 版 本 ， 也 就 是 发 布 版 本 。 如 下 图 所 示 。 完 成 后 运行 程序 即 可 。 
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第 1 篇 基础 (一 ) Qt 开发 环境 的 搭建 和 hello world 


hellowcrld 点 面 
上 构 4 
-Me 建 : Qt 4.8.1 (4.8.1) 加 


Qt 一 发 布 试行 helloworld 


选择 激活 构建 





最 后 ， 可 以 从 release 目录 中 将 helloworld.exe 复制 出 来 ， 然 后 将 需要 的 几 个 dl 文件 ( 跟 
debug 版 本 的 不 是 完全 一 样 哦 ! ) 也 复制 过 来 ， 将 它们 放 到 一 个 文件 夹 中 ， 打 包 进 行 发 布 。 


补充 : 如 果 要 给 生成 的 exe 可 执行 文件 更 换 一 个 自 定 义 图 标 ， 可 以 这 样 做 : 


1 在 项 目 中 添加 一 个 myapp.rc (名 字 可 以 随意 ) 文 件 ， 然 后 在 里 面 输入 下 面 一 行 代码 : 
IDI_ICON1 ICON DISCARDABLE "appico.ico" 

这 里 的 appico.ico 就 是 自己 的 .ico 图 标 文件 ; 

2 .在 .pro 项 目 文件 中 添加 下 面 一 行 代码 : 
RC_FILE = myapp.rc 

3 重新 编译 

四 、Qt 工 具 介 绍 


安装 好 Qt 后 ， 会 在 开始 菜单 生成 一 个 目录 ， 如 下 图 所 示 。 





bh Macromedia 
bh Microsoft Office 
旧 Mplayer for Windows 


出 Qt by Nokia v4.8.1 (MinGW Opensc 
Qt Assistant b 


加 Designer 
区 Examples and Demos 


[9 Linguist 
Qt 4.8.1 (Build Debug Libraries) 


Qt 4.8.1 Command Prompt 医 


这 里 是 Qt 提供 的 几 个 工具 软件 。 其 中 Assistant 是 Qt 助手 ， 它 已 经 集成 到 了 Qt Creator 中 ， 就 是 

帮助 模式 ; Designer 是 Qt 设计 师 ， 它 也 集成 到 了 QtCreator 中 ， 就 是 设计 模式 ; Exampleand 

Demos 是 Qt 示例 程序 和 演示 程序 ， 其 中 的 演示 程序 就 是 一 些 比较 大 型 的 程序 ， 这 个 我 们 在 欢 

J 已 经 看 到 了 ， 不 过 这 里 可 以 直接 运行 这 些 程序 ; 语言 家 ， 是 用 来 对 软件 进 
行 国际 化 翻译 的 ; 下 面 的 Qt4.8.1 Command Prompt 可 以 用 来 进行 命令 行 操作 ， 上 比如 使 用 命 

. 来 编译 程序 等 。 








五 、 附 录 
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前 面 为 了 运行 生成 的 helloworld.exe 文件 ， 复制 了 一 些 dll 文 件 。 其 实 ， 如 果 只 想 在 本 机 运行 
程序 ， 那 么 不 必要 每 次 都 复制 这 些 文件 ， 只 需要 将 path 环境 变量 设置 一 下 即 可 。 我 们 在 桌面 
计算 机 (我 的 电脑 ) 图 标 上 点 击 和 鼠标 右键 ， 选 择 属性 ， 然 后 选择 高 级 系统 设置 ， 在 这 里 在 高 
级 页 面 选择 环境 变量 ， 然 后 在 系统 变量 中 找到 path 变量 ， 双 击 ， 在 变量 值 的 最 后 ， 添 加 上 Qt 
的 bin 目录 的 路 径 ， 我 这 里 是 ;c:\Qt\4.8.1\bin (注意 ， 在 最 前 面 有 个 英文 半角 的 分 号 ) 。 
如 下 图 所 示 。 





| 篇 加 系统 变 呈 


变量 名 9): 
变量 值 0 : 











这 样 以 后 就 不 需要 再 复制 那些 dl 文件 了 。 其 实 ， 还 有 一 种 方式 也 不 需要 dl 文件 ， 那 就 是 静态 
编译 ， 不 过 使 用 静态 编译 的 Qt 程序 很 大 ， 而 且 不 够 灵活 ， 所 以 这 里 不 再 讲解 ， 有 兴趣 的 朋友 
可 以 在 网 上 搜索 一 下 。 


这 一 篇 中 通过 创建 一 个 hello world 程 序 ， 主 要 讲解 了 Qt Creator 开 发 环境 的 创建 以 及 Qt 程序 运 
行 发 布 等 内 容 。 这 一 篇 是 最 基本 的 知识 ， 项 望 大 家 先 看 完 本 篇 再 来 学 习 下 面 的 内 容 。 在 《Qt 
Creator 快 速 入 门 》 一 书 中 对 开发 环境 以 及 hello world 程 序 进行 了 更 加 详细 深入 的 讲解 ， 有 需 
要 的 童鞋 可 以 参考 一 下 。 


涉及 到 的 源码 下 载 


第 2 篇 基础 (二 ) 编写 Qt 多 窗口 程序 


导语 


程序 要 实现 的 功能 是 : 程序 开始 出 现 一 个 对 话 框 ， 按 下 按钮 后 便 能 进入 主 窗口 ， 如 果 直 接 关 
闭 这 个 对 话 框 ， 便 不 能 进入 主 窗 口 ， 整 个 程序 也 将 退出 。 当 进入 主 窗 口 后 ， 我 们 按 下 按钮 ， 
会 弹出 一 个 对 话 框 ， 无 论 如 何 关 闭 这 个 对 话 框 ， 都 会 回 到 主 窗 口 。 


程序 里 我 们 先 建立 一 个 工程 ， 设 计 主 界面 ， 然 后 再 建立 一 个 对 话 框 类 ， 将 其 加 入 工程 中 ， 然 
后 在 程序 中 调用 自己 新 建 的 对 话 框 类 来 实现 多 窗口 。 


在 这 一 篇 还 会 涉及 到 代码 里 中 文字 符 串 显示 的 问题 。 


环境 是 : Windows 7 + Qt 4.8.1 +Qt Creator 2.4.1 


目录 


e 一 、 添 加 主 窗口 

。 二 、 代 码 中 的 中 文 显示 

e 三、 添加 登录 对 话 框 

。 四 、 使 用 自 定义 的 对 话 框 类 


正 丈 
一 、 添 加 主 窗口 


1 我 们 打开 Qt Creator， 新 建 Qt Gui 应 用 ， 项 目 名 称 设置 为 nwindows ， 在 类 信息 界面 保持 基 
类 为 QMainwindow ， 类 名 为 Mainwindow ， 这 样 将 会 生成 一 个 主 窗口 界面 。 


2 完成 项 目 创建 后 ， 打 开 mainwindow.ui 文件 进入 设计 模式 ， 向 界面 上 拖 入 一 
个 Push Button ， 然后 对 其 双击 并 修改 显示 文本 为 “按钮 ” ， 如 下 图 所 示 。 








3 . 现在 运行 程序 ， 发 现 中 文 可 以 正常 显示 。 在 设计 模式 可 以 对 界面 进行 更 改 ， 那 么 使 用 代码 
也 可 以 完成 相同 的 功能 ， 下 面 就 添加 代码 来 更 改 按 钮 的 显示 文本 。 


二 、 代 码 中 的 中 文 显示 


1 我 们 点 击 Qt Creator 左 侧 的 “编辑 "按钮 进入 编辑 模式 ， 然 后 双击 mainwindow.cpp 文件 对 其 
进行 编辑 。 在 构造 函数 Mainwindow( ) 中 添加 代码 : 


Mainwindow: :MainWindow(QWidget *parent) : 
QMainwindow(parent )， 
ui(new Ui::Mainwindow) 


ui->setupUi(this); 
ui->pushButton->setText(" 新 窗口 "); // 将 界面 上 按钮 的 显示 文本 更 改 为 《新 窗口 ” 


这 里 的 ui 对 象 就 是 界面 文件 对 应 的 类 的 对 象 ， 在 mainwindow.h 文件 中 对 其 进行 了 定义 ， 我 
们 可 以 通过 它 来 访 问 设计 模式 添加 到 界面 上 的 部 件 前 面 添加 的 按钮 部 件 Push Button ， 在 其 


属性 面板 上 可 以 看 到 它 的 opjectName 属性 的 默认 值 为 pushButton ， 这 里 就 是 通过 这 个 属性 来 
获取 部 件 对 象 的 。 


我 们 使 用 了 QpushButton 类 的 setText() 函数 来 设置 按钮 的 显示 文本 ， 现 在 运行 程序 ， 效 果 如 
下 图 所 示 。 





隔 
下 | MainWindow 














2 我 们 发 现 ， 在 代码 中 来 设置 按钮 的 中 文 文本 出 现 了 乱码 。 这 个 可 以 有 两 种 方法 来 解决 ， 一 
个 就 是 在 编写 程序 时 使 用 英文 ， 当 程序 完成 后 使 用 Qt 语言 家 来 翻译 整个 软件 中 的 显示 字符 
串 ; 还 有 一 种 方法 就 是 在 代码 中 设置 字符 串 编码 ， 然 后 使 用 函数 对 要 在 界面 上 显示 的 中 文字 
符 串 进行 编码 转换 。 因 为 翻译 一 个 软件 很 麻烦 ， 对 于 这 些小 程序 ， 我 们 希望 中 文 可 以 立即 显 
示 出 来 ， 所 以 下 面 来 讲解 第 二 种 方法 。 


3 : 令 ee ， 可 以 使 用 QTextcodec 类 的 setcodecForTr() 函数 ， 一 般 的 使 用 方法 就 是 
在 要 进行 编码 转换 之 前 调用 该 函数 ， 下 面 我 们 在 main.cpp 文件 中 添加 代码 : 


#include <QtGui/QApplication> 
#include "mainwindow.h" 
#include <QTextCodec> // 添 加 头 文件 
ne mann(ant arge char Sargyvybl) 
{ 
QApplication a(argc, argv); 
QTextCodec: :setCodecForTr(QTextCodec: :codecForLocale()); / /设置 编码 
Mainwindow w; 
w. show( ); 


return a.exec(); 


因为 我 们 要 在 Mainwindow 类 中 进行 编码 转换 ， 所 以 要 在 创建 w 对 象 以 前 调用 该 函数 。 这 里 
的 codecForLocale() 函数 返回 适合 本 地 环境 的 编码 ， 当 然 ， 也 可 以 指定 编码 ， 例 如 要 设置 
为 “GB2312”， 可 以 使 用 下 面 的 代码 : 


QTextCodec: :setCodecForTr(QTextCodec: :codecForName("GB2312")); 


当 设 置 完 编码 后 ， 就 要 在 显示 中 文字 符 串 的 地 方 使 用 tr() 函数 ， 这 里 我 们 需要 将 修改 按钮 显 
示 文 本 的 代码 更 改 为 : 


J 户 /天 关上 名人 妆 一 天 访 
与 QQ t 乡 究 口 程 友 


ID 


ui->pushButton->setText(tr(" 新 窗口 ")); 


现在 运行 程序 ， 可 以 发 现 中 文 已 经 可 以 正常 显示 了 。 这 里 提示 一 下 ， 如 果 感 觉 编 辑 器 中 的 字 
体 太 小 ， 可 以 使 用 ctrl + + (同时 按 下 ctrl 和 加 号 键 ) 来 进行 放大 ， 使 用 ctrl+ - 可 以 缩 
小 。 

三 、 添 加 登录 对 话 框 


1 往 项 目 中 添加 新 文件 ， 这 里 可 以 在 编辑 模式 的 项 目 目录 上 点 击 和 鼠标 右键 ， 然后 选择 添加 新 
文件 菜单 ， 如 下 图 所 示 。 当 然 也 可 以 在 文件 菜单 中 进行 添加 。 



















吧 设 为 活动 的 项 目 
4 攻 构建 项 目 "nWindows" 
重新 构建 项 目 "nWindows" 
4 I 部 等 项 目 "nWindows" 
清理 项 目 "nWindows" 
全 ”执行 qamake 
入 ”运行 
添加 新 文件 .… 
添加 现 有 文件 .… 
新 子 项 目 . 
在 这 个 目录 中 搜索 .. 
关闭 项 目 "nWindows" 


折 苔 全 部 








2 模板 选择 Qt 设计 师 界 面 类 ， 然 后 界面 模板 选择 Dialog without Button ， 如 下 图 所 示 。 


选择 界面 模板 
时 界面 模板 


类 详情 empiatesVorms 
: Dialog with Buttons Bottom 
Dialog with Buttons Right 


站 


Main Window 


嵌入 式 设计 
设备 : | 无 
屏幕 大 小 : 











3 点 击 下 一 步 进 入 类 信息 界面 ， 这 里 将 类 名 更 改 为 Loginplg (注意 类 名 首 字母 一 般 大 
写 ) 。 如 下 图 所 示 。 
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选择 类 名 


六 


类 名 (C): LoginD] 赴 





头 文件 00 : logindlg.h 
源 文件 G) : logindle. cpp 








界面 文件 灾 ): logindle.ui 
路 径 站 ) : 了 :AnWirdows 








4 ' 当 完 成 后 会 自动 跳 转 到 设计 模式 ， 对 新 添加 的 对 话 框 进行 设计 。 我 们 向 界面 上 拖 入 一 
个 Push Button ， 然 后 更 改 显 示 文 本 为 “登录 到 主 界面 "。 为 了 实现 点 击 这 个 按钮 后 可 以 关闭 该 
对 话 框 并 显示 主 窗口 ， 我 们 需要 设置 信号 和 槽 的 关联 。 点 击 设计 模式 上 方 的 国 | 四 标 ， 或 者 
按 下 F4， 便 进入 了 信号 和 槽 编辑 模式 。 按 着 鼠标 左 键 ， 从 按钮 上 拖 向 界面 ， 如 下 图 所 示 。 
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当 放 开 和 鼠标 后 ， 会 弹出 配置 连接 对 话 框 ， 这 里 我 们 选择 pushButton 的 clicked() 信号 
和 Loginp1g 的 accept() 模 并 按 下 确定 按钮 。 如 下 图 所 示 。 





| 史 ， 配 于 连接 a 


pushButton (QPFushButton) LoginDle (QDialoe) 








clicked0 accept0 
clicked(bool) execO 
pressed0 open0 
released0 reject0 
toggled(bool) 




















编辑 ... 
显示 从 串 idget 继承 的 信号 和 楼 




















设置 好 信号 和 模 的 关联 后 ， 界 面 如 下 图 所 示 。 











于 看 | 

这 里 简单 介绍 一 下 信号 和 楷 ， 大 家 可 以 把 它们 都 看 做 是 函数 ， 比 如 这 里 ， 当 单 击 了 按钮 以 后 
就 会 发 射 单 击 信号 ， 即 clicked() ; 然后 对 话 框 接收 到 信号 就 会 执行 相应 的 操作 ， 即 执 

行 accept() 模 一 般 情况 下 我 们 只 需要 修改 槽 函数 即 可 ， 不过， 这 里 的 accept() 已 经 实 
现 了 默认 的 功能 ， 它 会 将 对 话 框 关闭 并 返回 Accepted ， 所 以 我 们 无 需 再 做 更 改 。 下 面 我 们 就 
是 要 使 用 返回 的 Accepted 来 判断 是 否 按 下 了 登录 按钮 。 


完成 后 ， 可 以 按 下 贺 或 者 按 下 F3 来 返回 控件 编辑 模式 。 


四 、 使 用 自 定 义 的 对 话 框 类 


. 按 下 Ctrl+2 返 回 代 码 编辑 模式 ， 在 这 里 打开 main.cpp 文件 ， 添 加 代码 : 


#include <QtGui/QApplication> 
#include "mainwindow.h" 

#include <QTextCodec> // 添 加 头 文 件 
#include "logindlg.h" // 添 加 头 文件 
TntmannmGnt arge > char argv 


{ 
QApplication a(argc, argv); 
// QTextCodec: :setCodecForTr(QTextCodec::codecForLocale()); // 设 置 编 码 
QTextCodec: :setCodecForTr(QTextCodec: :codecForName("GB2312")); 
Mainwindow w; 
LoginD1g dig; // 建立 自己 新 建 的 类 的 对 象 d1g 
if(dlg.exec() == QDialog::Accepted) // 利 | 用 Accepted 返 回 值 判断 按钮 是 否 被 按 下 
w. show( ); ”7 果 被 按 下 ， 显 示 主 窗口 
return a.exec(); Wh 0 直到 主 窗口 关闭 
else return 0; // 如 果 没 被 按 下 ， 则 不 会 进入 主 窗 口 ， 整 个 程序 结束 运行 
} 


在 这 里 ， 我 们 先 创建 了 Loginplg 类 的 对 象 dlg ， 然 后 让 dlg 运行 ， 即 执行 exec() 函数 ， 并 
判断 对 话 框 的 返回 值 ， 如 果 是 按 下 了 登录 按钮 ， 那 么 返回 值 应 该 是 Accepted ， 这 时 就 显示 主 
窗口 » 并 正常 和 丸 行程 序 ; 如 果 没 有 按 下 登录 按钮 那么 高 沈 结 束 程 序 

现在 大 家 可 以 运行 程序 ， 测 试 一 下 效果 。 


2 上面 讲 述 了 一 种 显示 对 话 框 的 情况 ， 下 面 再 来 讲述 一 种 情况 。 我 们 打开 mainwindow.ui 文 
件 进入 设计 模式 ， 然 后 在 按钮 部 件 上 单 击 息 标 右键 并 选择 转 到 档 菜 单 ， 如 下 图 所 示 。 





改变 对 条 名 称 .… 
变型 为 » 


改变 工具 提示 .. 
改变 “这 是 什么 " .. 


大 小 限定 » 
提升 为 ... 
转 到 棒 .… 


同 ” 放 到 后 面 (B) 
喇 | 放 到 前 面 旧 





在 弹出 的 转 到 槽 对 话 框 中 选择 clicked() 信号 并 按 下 确定 按钮 。 这 时 会 跳 转 到 编辑 模 
式 mainwindow.cpp 文件 的 on_pushButton_clicked() 函数 处 ， 这 个 就 是 自 动 生 成 的 模 ， 它 已 经 
在 mainwindow.h 文件 中 进行 了 声明 。 我 们 只 需要 更 改 函 数 体 即 可 。 这 里 更 改 为 : 


void Mainwindow: :on_pushButton_clicked() 


{ 
QDialog *dlg = new QDialog(this); 
dlg->show( ); 

} 


我 们 创建 了 一 个 对 话 框 对 象 ， 然 后 让 其 显示 ， 这 里 的 this 参数 表明 这 个 对 话 框 的 父 窗口 

是 Mainwindow 。 注意 这 里 还 需要 添加 #include <QDialog> 头 文件 包含 。 有 的 童鞋 可 能 会 问 ， 
这 里 如 果 多 次 按 下 按钮 ， 那 么 每 次 都 会 生成 一 个 对 话 框 ， 是 否 会 造成 内 存 泄露 或 者 内 存 耗 

尽 。 这 里 简单 说 明 一 下 ， 因 为 现在 只 是 演示 程序 ，Qt 的 对 象 树 机 制 保证 了 不 会 造成 内 存 泄 
露 ， 而 且 不 用 写 delete 语句 ; 而 且 因 为 是 桌面 程序 ， 对 于 这 样 一 个 简单 的 对 话 框 ， 其 使 用 的 
内 存 可 以 被 忽略 。 


当然 ， 严 谨 的 童鞋 也 可 以 在 mainwindow.h 文件 中 先 定 义 一 个 对 话 框 对 象 ， 并 再 在 构造 函数 中 
进行 创建 ， 然 后 再 到 这 里 使 用 。 


下 面 大 家 可 以 运行 一 下 程序 ， 查 看 效果 。 


NS 


吉 语 


号 


这 个 程序 里 我 们 实现 了 两 类 窗口 打开 的 方式 ， 一 个 是 自身 消失 而 后 打开 另 一 个 窗口 ， 一 个 是 
打开 另 一 个 窗口 而 自身 不 消失 。 可 以 看 到 他 们 实现 的 方法 是 不 同 的 。 


涉及 到 的 源码 下 载 


第 3 篇 基础 〈 三 ) Qt 登录 对 话 框 


导语 在 前 一 篇 的 内 容 中 已 经 实现 了 登录 对 话 框 ， 这 里 我 们 对 其 进行 改进 。 在 弹出 对 话 框 中 卉 
写 用 户 名 和 密码 ， 按 下 登录 按钮 ， 如 果 用 户 名 和 密码 均 正确 则 进入 主 窗口 ， 如 果 有 和 错 则 弹出 
警告 对 话 框 。 


环境 是 : Windows 7 + Qt 4.8.1+ Qt Creator 2.4.1 
目录 一 、 创 建 项 目 二 、 和 登录 设置 
正文 


二 创建 项 目 


一 人 


.新建 Qt Gui 应 用 ， 项 目 名 称 为 login ， 类 名 和 基 类 保持 Mainwindow 和 QMainwindow 不 变 。 


* 完成 项 目 创建 后 ， 向 项 目 中 添加 新 的 Qt 设计 师 界 面 类 ， 模 板 选 
Dialog without Buttons ， 类 名 更 改 为 LoginDialog ° 完成 后 向 界面 上 添加 两 个 标 
Label 、 两 个 行 编辑 器 Line Edit 和 两 个 按钮 push Button ， 设 计 和 界面 如 下 图 所 示 。 


句 答 只 


用 户 名 : 


3 这 里 在 属性 编辑 器 中 将 用 户 名 后 面 的 行 编辑 辑 器 的 object Name 属性 更 改 为 usrLineEdit ， 
密码 后 面 的 行 编辑 器 为 pwdLineEdit ， 登录 按钮 为 loginBtn ， 退出 按钮 为 exitBtn 。 如 下 图 
所 示 。 


usrLineEdit : QLineEdit 





履 性 值 
< 

ET usrLineEdit | 
”| 





enabled 名 | 





4 下面 我 们 使 用 另外 一 种 信号 和 槽 的 关联 方法 来 设置 退出 按钮 。 在 设计 模式 下 面 的 信号 和 模 
编辑 器 中 ， 先 点 击 左 上 角 的 绿色 加 号 添加 关联 ， 然 后 选择 发 送 者 为 exitBtn ， 信 号 

为 clicked() ， 接 收 者 为 Loginpialog ， 模 为 close() 。 如 下 图 所 示 。 这 样 ， 当 单 击 退出 按钮 
时 ， 就 会 关闭 登录 对 话 框 。 





发 送 者 告 号 接收 者 本 
exitBtn clicked0 LoginDialog close() 


Acetion 编 辑 器 | 信号 和 楼 编辑 器 





5 ' 右 击 登录 按钮 ， 在 弹出 的 菜单 中 选择 “ 转 到 槽 ...”， 然 后 选择 clicked() 信号 并 确定 。 转 到 
相应 的 槽 以 后 ， 添 加 函数 调用 : 


void LoginDialog::on_ loginBtn_clicked() 


accept(); 


6. 下面 到 main.cpp 文件 ， 更 改 内 容 如 下 : 


#include <QtGui/QApplication> 

#include "mainwindow.h" 

#include "logindialog.h" 

Tntemarm(unt argc > cnare argvhl) 

{ 
QApplication a(argc, argv); 
MainwWindow w; 
LoginDialog dlg; 
If (dlg.exec() == QDialog::Accepted) 
{ 


w.show( ); 
return a.exec(); 


else return 9; 


7 ' 这 时 运行 程序 ， 按 下 退出 按钮 会 退出 程序 ， 按 下 登录 按钮 会 关闭 登录 对 话 框 ， 并 显示 主 窗 


1 .下面 添 加 代码 来 实现 使 用 用 户 名 和 密码 登录 ， 这 里 我 们 只 是 简单 的 将 用 户 名 和 密码 设置 为 
了 固定 的 字符 串 。 到 logindialog.cpp 文件 中 将 登录 按钮 的 单 击 信号 对 应 的 柳 的 代码 更 改 为 : 


void LoginDialog::on_ loginBtn_clicked() 





{ 
// 判断 用 户 名 币 
// 如 果 错 误 则 弹 对 
if(ui- SL NEE >text() == tr("yafeilinux") && 
ui->pwdLineEdit->text() == tr("123456")) 


accept(); 
} else { 
QMessageBox: :warning(this, tr("Waring"), 
tr("user name or password error!"), 
QMessageBox: :Yes); 


Qt 中 的 QMessageBox 类 提供 了 多 种 常用 的 对 话 框 类 型 ， 比 如 这 里 的 警告 对 话 框 ， 还 有 提示 对 话 
框 ， 问 题 对 话 框 等 。 这 里 使 用 了 静态 ed ， 这 种 方式 很 方便 。 其 中 
的 参数 依次 是 : this 表明 父 窗口 是 登录 对 话 框 ; 然后 是 窗口 标题 ; 然后 是 显示 的 内 容 ; 最 后 
一 个 参数 是 显示 的 按钮 ， 这 里 使 用 了 By ° 大 家 注意 还 要 添加 该 美的 头 文件 包含 ， 


Bp : #include <QMessageBox> 。 


2 下面 运行 程序 ， 如 果 输 入 用 户 名 为 yafeilinux ， 密 码 为 123456 ， 那 么 可 以 登录 ， 如 果 输 
入 其 他 的 字符 ， 则 会 弹出 警告 对 话 框 ， 如 下 图 所 示 。 


豆 | Dialog \®?| % 








用 户 名 : 111 


而 | Waring 





1 User Name or password errorl 











是 
对 于 输入 的 密码 ， 我 们 常见 的 是 显示 成 小 黑 点 的 样式 。 下 面 点 击 logindialog.ui 文件 进入 

Se ， 然 后 选中 界面 上 的 密码 行 编辑 器 ， 在 属性 编辑 器 中 将 echoMode 属性 选择 

为 Password 。 这 时 再 次 运行 程序 ， 可 以 看 到 密码 显示 已 经 改变 了 。 如 下 图 所 示 。 
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豆 | Dialog ?| 宇 - ， 2 | 


而 | Waring 


1 User Name or password errofl 





当然 ， 除 了 在 属性 编辑 器 中 进行 更 改 ， 也 可 以 在 loginpialog 类 的 构造 函数 中 使 

用 setEchoMode(QLineEdit::Password) 函数 来 设置 。 

4 在 行 编辑 器 的 属性 栏 中 还 可 以 设置 占 位 符 ， 就 是 没有 输入 信息 前 的 一 些 提示 语句 。 例 如 将 
密码 行 编辑 器 的 placeholderText 属性 更 改 为 “请 输入 密码 ”将 用 户 名 行 编辑 器 的 更 改 为 “请 输 
入 用 户 名 ”， 运 行 效果 如 下 图 所 示 。 


司 Dialog [Le les) 





用 户 名 : “请 输入 用 户 名 


密码 : 请 输入 密 


. 对 于 行 编辑 器 ， 还 有 一 个 问题 就 是 ， 比 如 我 们 输入 用 户 名 ， 在 前 面 添加 了 一 个 空格 ， 这 样 
ee ， 这 个 可 以 使 用 Qstring 类 的 trimmed( ) 有 函数 来 实现 ， 它 可 以 去 除 字 
符 串 前 后 的 空白 字符 。 下 面 将 logindialog.cpp 文件 中 登录 按钮 单 击 信号 槽 函数 中 的 判断 代码 
更 改 为 : 
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if(ui->usrLineEdit->text().trimmed() == tr("yafeilinux") 
&& Ui->pwdLineEdit->text() == tr("123456")) 


这 时 运行 程序 ， 已 经 实现 相应 的 功能 了 。 


6 当 登 录 失 败 后 ， 我 们 希望 可 以 清空 用 户 名 和 密码 信息 ， 并 将 光标 定位 到 用 户 名 输入 
框 中 。 这 个 可 以 通过 在 判断 用 户 名 和 密码 错误 后 添加 相应 的 代码 来 实现 : 


void LoginDialog::on_ loginBtn_clicked() 


// 判断 用 户 名 和 密码 是 否 正 确 ， 如 果 错 误 则 弹出 警告 对 话 杠 
if(ui->usrLineEdit->text().trimmed() == tr("yafeilinux") 
&& ui->pwdLineEdit->text() == tr("123456")) 


accept(); 
yelse { 

QMessageBox: :warning(this, tr("Waring"), 
tr("user name or password error!"), 
QMessageBox: :Yes); 

// 清空 内 容 并 定位 光标 

ui->usrLineEdit->clear(); 

ui->pwdLineEdit->clear(); 

ui->usrLineEdit->setFocus(); 


下 面 运行 程序 ， 大 家 可 以 测试 一 下 效果 。 


7 这 里 再 补充 一 个 技巧 ， 也 就 是 Qt Creator 的 代码 补 全 功能 。Qt Creator 有 很 强大 的 代码 补 全 
功能 ， 比 如 输入 一 个 关键 字 时 ， 只 要 输入 前 几 个 字母 ， 就 会 弹出 相关 的 关键 字 的 选择 列表 ; 
输入 完 一 个 对 象 ， 然 后 输入 点 以 后 ， 就 会 弹出 该 对 象 所 有 可 用 的 变量 和 函数 。 这 里 要 说 的 

是 ， 当 输入 一 个 比较 长 得 函数 或 变量 名 时 ， 可 以 通过 其 中 的 几 个 字母 来 定位 。 比 如 说 ， 要 输 
入 前 面 讲 到 的 setFocus() 函数 ， 那 么 只 需 输 入 首 字母 s 和 后 面 的 大 写字 母 F 即 可 ， 这 样 可 
以 大 大 缩减 提示 列表 ， 如 果 还 没有 定位 到 ， 那 么 可 以 输入 F 后面 的 字母 。 如 下 图 所 示 。 


ui->usrLineEdit->sFo 
setFocus 
H setFocuspolicy 

H setFocusproxy 
setFont 

人 参 setForegroundRole 














我 们 还 可 以 使 用 ctrl + 空格 键 来 强制 代码 补 全 ， 不 过 这 个 一 般 会 和 我 们 的 输入 法 的 快捷 键 冲 
突 ， 大 家 可 以 更 改 输 入 法 的 快捷 键 ， 也 可 以 在 Qt Creator 中 的 工具 一 选项 一 环境 一 键盘 中 来 设 
置 快捷 键 。 





这 一 节 又 讲解 了 一 种 信号 和 槽 的 关联 方法 ， 还 讲解 了 一 些 部 件 的 属性 设置 等 内 容 。 在 《Qt 
Creator 快 速 入 门 》 一 书 中 还 讲解 了 大 量 常用 的 部 件 的 使 用 说 明 ， 大 家 可 以 参考 一 下 。 


涉及 到 的 源码 下 载 





第 4 篇 基础 (四 ) 添加 菜单 图 标 一 使 用 Qt 资源 文 


导语 


后 面 几 篇 里 我 们 将 介绍 常用 的 Qt 主 窗口 部 件 QqMainwindow ， 主 窗口 部 件 就 是 一 般 的 应 用 程序 主 
窗口 ， 它 包含 了 菜单 栏 、 工 具 栏 、 中 心 部 件 、 状 态 栏 和 可 停 等 部 件 等 。 这 一 篇 将 着 重 介绍 菜 
单 的 实现 以 及 使 用 资源 文件 来 添加 菜单 图 标 。 


环境 是 : Windows 7 + Qt 4.8.1 +Qt Creator 2.4.1 


目录 


。 一 、 添 加 主 窗口 菜单 

e 二 、 添 加 菜单 图 标 

。 三 、 添 加 资源 文件 

e。 四 、 使 用 资源 文件 

。 五 、 使 用 代码 来 添加 菜单 和 图 标 


AE 
一 、 添 加 主 窗口 菜单 


1: 新建 Qt Gui 应 用 ， 项 目 名 称 为 myMainwindow ， 基 类 选择 QMainwindow ， 类 名 


为 Mainwindow ° 


2 . 创建 完 项 目 后 ， 打 开 mainwindow.ui 文件 进入 设计 模式 。 在 这 里 可 以 看 到 界面 左上 角 的 “在 
这 里 输入 ”， 我 们 可 以 在 这 里 添加 菜单 。 双 击 “ 在 这 里 输入 ”， 将 其 更 改 为 “文件 ( &F )》， 然 后 按 
下 回 车 键 ， 效 果 如 下 图 所 示 。 这 里 的 gF 表明 将 菜单 的 快捷 键 设置 为 了 Altt F， 可 以 看 到 ， 实 
际 的 显示 效果 中 & 符号 是 隐藏 的 。 





广 伯 人 | 在 这 里 给 入 
[zs 入 | 
添加 分 陋 符 
图 Ld 
面 看 | 








3 : 同样 的 方法 ， 我 们 在 文件 菜单 中 添加 "新 建 (&N)" 子 菜单 ， 效 果 如 下 图 所 示 。 菜 单 后 面 的 那 
个 加 号 图 标 是 用 来 创建 下 一 级 菜单 的 。 









在 这 里 给 入 
添加 分 阳 符 


二 、 添 加 菜单 图 标 


1 Qt 中 的 一 个 菜单 被 看 做 是 一 个 Action ， 我 们 在 下 面 的 Action 编辑 器 中 可 以 看 到 刚才 添加 
的 "新建 "菜单 ， 如 下 图 所 示 。 























Actioz 编 辑 器 | 信号 和 柳编 辑 器 








2 双击 该 条 目 ， 会 弹出 编辑 动作 对 话 框 ， 这 里 可 以 进行 各 项 设置 ， 比 如 我 们 可 以 设置 菜单 的 
快捷 键 ， 点 击 一 下 快捷 键 后 面 的 行 编辑 器 ， 然 后 按 下 键盘 上 的 ctrl + N ， 这 样 就 可 以 将 该 菜 
单 的 快捷 键 设置 为 ctrl + N 。 如 下 图 所 示 。 那 么 大 家 可 能 会 问 ， 了 既然 该 菜单 的 快捷 键 是 这 么 
设置 的 ， 那 么 前 面 设置 的 "新建 (N)” 中 的 N 是 什么 呢 ? 这 个 可 以 被 称 为 加 速 键 ， 就 是 只 有 当 文件 
菜单 处 于 激活 〈 显 示 ) 状态 时 ， 按 下 N 键 才 会 执行 新 建 菜单 的 功能 。 


“加 纺 辑 动 作 am 


文本 上): 新 建 lf) 

对 象 名 称 全) : action 可 

工具 提示 : 新 建 由) 

图 标 民 ): | Nornal Off | [器 








可 选 的 : 
快捷 键 : 





3 在 编辑 动作 对 话 框 中 的 图 标 后 面 的 [| 黑色 箭头 下 拉 框 可 以 选择 使 用 资源 还 是 使 用 文 
件 ， 如 果 使 用 文件 的 话 ， 那 么 就 可 以 直接 在 弹出 的 文件 对 话 框 中 选择 本 地 磁盘 上 的 一 个 图 标 
文件 。 下 面 我 们 来 讲述 使 用 资源 的 方式 ， 如 果 直 接点 击 这 个 按钮 就 是 默认 的 使 用 资源 。 现 在 
我 们 先 按 下 编辑 动作 对 话 框 的 确定 按钮 关闭 它 。 


三 、 添 加 资源 文件 


1 Qt 中 可 以 使 用 资源 文件 将 各 种 类 型 的 文件 添加 到 最 终生 成 的 可 执行 文件 中 ， 这 样 就 可 以 避 
免 使 用 外 部 文件 可 能 出 现 的 一 些 问题 。 而 且 ， 在 编译 时 Qt 还 会 将 资源 文件 进行 压缩 ， 我 们 可 
能 发 现 生 成 的 可 执行 文件 比 我 们 添加 到 其 中 的 资源 文件 还 要 小 。 


2 我 们 向 项 目 中 添加 新 文件 ， 模 板 选择 Qt 资源 文件 。 如 下 图 所 示 。 然 后 将 名 称 设置 


为 myResources ° 











Qt 设计 师 寞 面 类 
Qt 设计 师 寞 面 
Qt 资源 文件 

















创建 可 以 添加 到 Qt c++ 项 目 中 的 Qt 控件 文件 。 











a 





3 创建 完 文件 后 会 自动 打开 该 资源 文件 ， 这 里 需要 先 在 下 面 添加 前 级 ， 就 是 点 击 添加 按钮 ， 
然后 选择 前 级 ， 上 默认 的 前 级 是 /new/prefix1 ， 这 个 可 以 随意 修改 (不 要 出 现 中 文字 符 ) ， 我 
们 这 里 因为 要 添加 图 片 ， 所 以 修改 为 /mylmages。 然 后 再 按 下 添加 按钮 来 添加 文件 ， 这 里 最 好 
将 所 有 要 用 到 的 图 片 放 到 项 目 目录 中 。 比 如 我 们 这 里 在 项 目 目 录 中 新 建 了 一 个 images 文件 
夹 ， 然 后 将 需要 的 图 标 文件 粘贴 进去 。 添 加 完 文件 后 ， 如 下 图 所 示 。 





4 /mylmages 
了 images/filenewpng 
加 images/fileopen.png 
二 images/filesave.png 





images/filesaveas.png 
和 images/find.png 








添加 是 除 
属性 

别名 : | 

前 纺 : AmyImages 


语言 : 


Ol 
Ol 
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4 当 添 加 完 资源 后 ， 一 定 要 按 下 ctrl + S 来 保存 资源 文件 ， 不 然 在 后 面 可 能 无 法 显示 已 经 
添加 的 资源 。 


四 、 使 用 资源 文件 


1 我们 重新 到 设计 模式 打开 新 建 菜单 的 编辑 动作 对 话 框 ， 然 后 添加 图 标 。 在 打开 的 选择 资源 
对 话 框 中 ， 第 一 次 可 能 无 法 显示 已 经 存在 的 资源 ， 可 以 按 下 左上 和 角 的 绿 箭头 来 更 新 显示 。 效 
果 如 下 图 所 示 。 





4 <resource root> 


4 mylmages [可 访 


limages 








fllenew.... fileopen... filesave.... 


画 ”的 


fllesave... find.png 





2 . 我 们 点 击 这 里 需要 的 新 建 图 标 filenew.png ， 按 下 确定 即 可 。 现 在 按 下 ctrl + R 键 运 行程 
序 ， 效 果 如 下 图 所 示 。 





了 新建 (N) Ctrl+N 








五 、 使 用 代码 来 添加 菜单 和 图 标 


1 对 于 添加 的 资源 文件 ， 在 项 目 目录 中 可 以 看 到 ， 即 myResources.qrc ， 使 用 写字 板 程序 将 
其 打开 ， 可 以 发 现 它 其 实 就 是 一 个 XML 文档 : 
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<RCC> 
<qresourceprefix="/myImages"> 
<file>images/filenew.png</file> 
<file>images/fileopen.png</file> 
<file>images/filesave.png</file> 
<file>images/filesaveas.png</file> 
<file>images/find.png</file> 
</qresource> 
</RCC> 


2 前 面 是 在 设计 模式 添加 的 图 标 文件 ， 下 面 我 们 使 用 代码 再 来 添加 一 个 菜单 ， 并 为 其 设置 图 
标 。 在 编辑 模式 打开 mainwindow.cpp 文件 ， 并 在 构造 函数 中 添加 如 下 代码 : 


// 创建 新 的 动作 

QAction *openAction = new QAction(tr("&O0pen"), this); 
// 添加 图 标 

QIcon icon(":/myImages/images/fileopen.png"); 
openAction->setIcon(icon); 


// 设置 快捷 键 
openAction->setShortcut(QKeySequence(tr(" CtrlL+0"))); 
// 在 文件 菜单 中 设置 新 的 打开 动作 


ui->menu_F->addAction(openAction); 


有 


这 里 添加 图 标 时 ， 就 是 使 用 的 资源 文件 中 的 图 标 。 使 用 资源 文件 ， 需 要 在 最 开始 使 用 冒号 
然后 添加 前 级 ， 后 面 是 文件 的 路 径 。 在 代码 中 使 用 文件 菜单 ， 就 是 使 用 其 opjectName 。 大 家 
现在 可 以 运行 程序 查看 效果 ， 当 然 这 里 也 可 以 将 Open 改 为 中 文 。 


结语 


这 一 篇 中 主要 讲解 了 如 何 使 用 资源 文件 ， 讲 述 了 在 设计 模式 和 代码 中 两 种 使 用 方法 。 硕 望 大 
家 可 以 亲自 练习 一 下 本 篇 的 内 容 ， 在 后 面 的 章节 中 ， 对 于 添加 菜单 和 图 标 等 操作 将 不 再 进行 
讲解 。 


涉及 到 的 源码 下 载 


图 标 文件 集合 
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导语 


在 前 一 篇 中 我 们 学 习 了 使 用 资源 文件 为 主 窗 口 添加 菜单 图 标 。 这 次 ， 我 们 先 将 菜单 进行 完 
善 ， 然 后 讲解 一 些 布局 管理 方面 的 内 容 。 一 个 软件 不 仅 要 有 强大 的 功能 ， 还 要 有 一 个 美观 的 
界面 ， 布 局 管理 器 就 是 用 来 对 界面 部 件 进行 布局 管理 的 。 这 一 节 将 简单 介绍 一 下 Qt 的 布局 方 
面 的 应 用 ， 大 家 可 以 以 此 类 推 ， 学 习 使 用 其 他 布局 部 件 。 


环境 是 : Windows 7 + Qt 4.8.1 +Qt Creator 2.4.1 


目录 


。 一、 完善 
。 二 、 向 工具 栏 添加 菜单 图 标 
e 三 、 布 局 管理 器 


正文 


一 、 完 善 菜单 


1 新 建 Qt Gui 应 用 ， 项 目 名 称 为 myMainwindow ， 基 类 选择 QMainwindow ， 类 名 


为 Mainwindow °? 


2 . 完成 后 ， 在 设计 模式 添加 菜单 项 ， 并 添加 资源 文件 ， 向 其 中 添加 菜单 图 标 。 最 终 各 个 菜单 
如 下 图 所 示 。 

文件 (PD | 编辑 (E) 者 | 

囊 SeaN 和 
岛 “ 打 F(O) | 
关闭 (O) 


保存 (9) 
另存 为 (A) 


各 出 0 
在 这 里 边 入 
添加 分 阳 符 


咋 只 哈 哈哈 哆 
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帮助 (H) 在 i 
号 ”撤销 四) 习 
总 ” 剪 切 0 | 
引 ”复制 (C) | 
局” 粘贴 (v) | 
办 坦 找 ( 入 


















在 Action 编辑 器 中 修改 动作 的 对 象 名 称 、 图 标 和 快捷 键 ， 最 终 如 下 图 所 示 。 


和 本 本 四 一 


名 称 

可 action_ New 
国 action_Open 
XE action_Close 
轴 action_Save 
较 action_SaveAs 
咽 action_Exit 
号 action_Undo 
de action_Cut 
DH action_Copy 
叶 action_paste 
8 action_Find 


oooeoeoeoeeseeeooeoeeooosoeoososoooooosoeoooooooooeeon 


和 和 0。ooooooosoeoeooesooerroooooooosoroooosooooooooooooosoeo 





回回 加 同 同 同 回 回 同 同 辐 辐 窗 


文本 
新 建 (&N) 
打开 (&O) 
关闭 (&O) 
保存 (&S) 
另存 为 (&A) 
膛 出 (& 
撤销 (&Z) 
募 切 (8 
复制 (&O) 
粘贴 (&V) 
查找 (&P) 
版 本 说 明 


二 、 向 工具 栏 添加 菜单 图 标 


快捷 键 
Ctrl+N 
Ctrl+O 
Ctrl+W 
Ctrl+S 


Ctrl+Q 
Ctrl+Z 
Ctrl+X 
Ctrl+C 
Ctrl+V 
Ctrl+F 
Ctrl+H 


idle 


工具 提示 
新 建 (N) 
打开 (O) 
关闭 (O 
保存 (9) 
另存 为 (A) 
退出 09 
灌 销 加 
莫 切 09 
复制 (C) 
粘贴 (V) 
查找 ( 
版 本 说 明 


可 以 将 动作 编辑 器 中 的 动作 拖 动 到 工具 栏 中 作为 快捷 图 标 使 用 ， 如 下 图 所 示 。 
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国 国 加 
文件 (编辑 (E) ”帮助 (H) “在 这 里 输入 
站 党 六 
+ 
. 
加 重 加 














| 名 称 使 用 文本 快捷 键 可 选 的 。 工具 提示 
| action_ New 加 新 建 (&N) Ctrl+N 回 新 建 (N) 





| 加 action_ Open 打开 (&O) Ctrl+O 回 打开 (O) 
可 以 在 工具 栏 上 点 击 和 鼠标 右键 来 添加 分 隔 符 ， 如 下 图 所 示 。 


De Tam 


提升 为 … 





移 除 工具 栏 “mainToolBar" 








最 终 工 具 栏 如 下 图 所 示 。 


文件 (Pi ”编辑 (E) ”帮助 (H) “在 这 里 输入 


时 和 访 岁 $$% 昌 所 的 


1* 从 左边 控件 栏 中 拖 入 三 个 按钮 Push Button 和 一 个 vertical Layout (〈 重 直 布 局 管理 器 ) 


到 界面 上 ， 如 下 图 所 示 。 
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PushButtom 
PushButtom PushButtom 








然后 将 三 个 按钮 拖 入 到 布局 管理 器 中 ， 这 时 三 个 按钮 就 会 自动 重 直 排列 ， 并 且 进 行 水 平 拉 
伸 ， 无 论 如 何 改 变 布 局 管理 器 的 大 小 ， 按 钮 总 是 水 平方 向 变化 。 如 下 图 所 示 。 





- 央 - 


[| PushButton | 


FushButton 














-加 ~ 





2 . 我 们 可 以 选中 布局 管理 器 ， 然 后 按 下 上 方 工具 栏 中 的 “打破 布局 "按钮 来 删除 布局 管理 器 。 
(当然 也 可 以 先 将 三 个 按钮 移出 ， 然 后 按 下 Delete 键 来 删除 布局 管理 器 ， 如 果 不 移出 按钮 ， 
那么 会 将 它们 同时 删除 。) 如 下 图 所 示 。 


:( 日 ”编辑 (E)” 帮 | 打破 布局 (8) 凰 


i 让 久 今 光 是 忆 扑 











FushButton 
PushButtom 





-十 - 


3 下 面 我 们 使 用 分 裂 器 ( Qsplitter ) 来 进行 布局 ， 先 同时 选中 三 个 按钮 ， 然 后 按 下 上 方 工 
具 栏 中 的 “使 用 分 裂 器 重 直 布局 "按钮 ， 如 下 图 所 示 。 














中 


然后 我 们 进行 放大 ， 可 以 发 现 ， 使 用 分 裂 器 按钮 纵向 是 可 以 变 大 的 ， 这 就 是 分 裂 器 和 布局 管 
理 器 的 重要 区 别 。 如 下 图 所 示 。 


FushButtor 
| PushButtom : 
FushButtorn 











4 布局 管理 器 除了 可 以 对 部 件 进 行 布局 以 外 ， 还 有 个 重要 用 途 ， 就 是 使 部 件 随 着 窗口 的 大 小 
变化 而 变化 。 我 们 删除 界面 上 的 部 件 ， 然 后 拖 入 一 个 文本 编辑 器 Text Edit 部 件 。 如 下 图 所 


0° 


然后 我 们 在 界面 上 点 击 鼠 标 右键 ， 选 择 布 局 一 栅 格 布局 〈 或 者 使 用 快捷 键 ctrl+6 ) 
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adti..Open 国 ， 
改变 对 条 名 称 acti..lose 里， 
ss 分 隔 符 QAc 
改变 工具 提示 .… action_Save 加 ， 
改变 “这 是 什么 " acti..veAs 六! 
大 小 限定 » 
提升 的 窗口 部 件 
改变 信号 
转 到 恒 . 
jy 新 于 3< 英 切 (T) Ctrl+X 
)n_New (& ; | | 
m_Open 打开 (&d SO 4 geometry (0.0) 400 x: 
)n_Close 关闭 (&d 时 烙 贴 (P) Ctrl+V x 0 
)n_Save 保存 (&S 选择 全 部 (A) Ctrl+A 半 i0 
)n_SaveAs ne 删除 (D) 
病 辑 器 国 亩 世 大 小 (S) Ctrl+]j 
咖 。 水平 布局 (H) Ctrl+H 
加 持家 布局 (V) Ctrl+L 
汪 \debug\myMainWindow .exe 启动 中 .. . 败 人 (P) 
el \debug\myMainWindow.exe 退出 ， 退 出 代码 | 圭 ”使 用 分 裂 吉 竺 有明 布 局 (LD 
疆 。 栅 格 布局 (G) Ctrl+G 
器。 在 窗 体 布局 中 布局 () 


这 时 整个 文本 编辑 器 部 件 就 会 填充 中 央 区 域 。 如 下 图 所 示 。 现 在 运行 程序 ， 可 以 发 现 ， 无 论 
怎样 拉 伸 窗 口 ， 文 本 编辑 器 总 是 卉 充 整 个 中 央 区 域 。 


文件 ( ”编辑 (E) ”帮助 (H) “在 这 里 输入 


BES 





别 是- 各 





这 一 篇 中 我 们 主要 介绍 了 布局 管理 器 的 应 用 ， 而 且 都 是 在 设计 模式 对 布局 管理 器 的 使 用 。 这 
里 使 用 三 种 方式 进行 了 演示 : 从 控件 栏 中 拖 入 布局 管理 器 ; 在 工具 栏 中 使 用 图 标 ; 还 有 使 用 
右键 菜单 (当然 还 有 快捷 键 的 方式 ) 。 
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在 本 篇 中 主要 对 重 直 布局 管理 器 进行 了 演示 ， 大 家 还 可 以 使 用 其 他 的 布局 管理 器 进行 测试 。 
对 于 如 何在 代码 中 使 用 布局 管理 器 ， 以 及 使 用 布局 管理 器 实现 可 隐藏 窗口 ， 可 以 参考 《Qt 
Creator 快 速 入 门 》 一 书 的 相关 章节 。 


涉及 到 的 源码 下 载 


第 6 篇 基础 (六) 实现 Qt 文本 编辑 功能 


导语 


前 面 已 经 在 主 窗口 中 添加 了 菜单 和 工具 栏 ， 这 一 篇 中 我 们 将 实现 基本 的 文本 编辑 功能 。 在 开 
始 正式 写 程序 之 前 ， 我 们 先 要 考虑 一 下 整个 流程 。 因 为 这 里 要 写 一 个 记事 本 一 样 的 程序 ， 所 
以 最 好 先 打 开 Windows 中 的 记事 本 ， 进 行 一 些 简单 的 操作 ， 然 后 考虑 怎样 去 实现 这 些 功能 。 
再 者 ， 再 强大 的 软件 ， 它 的 功能 也 是 一 个 一 个 加 上 去 的 ， 不 要 设想 一 下 子 写 出 所 有 的 功能 。 
我 们 这 里 先 实 现 新 建文 件 ， 保 存 文 件 ， 和 文件 另存 为 三 个 功能 ， 是 因为 它们 联系 很 紧 ， 而 且 
这 三 个 功能 总 的 代码 量 也 不 是 很 大 。 


环境 是 : Windows 7 + Qt 4.8.1+ Qt Creator 2.4.1 


目 系 


e 一 、 实 现 新 建文 件 、 文 件 保 存 和 另存 为 功能 
。 二、 实现 打开 、 关 闭 、 退 出 、 撤 销 、 复 制 、 剪 切 、 粘 贴 等 功能 


汪 
一 、 实 现 新 建文 件 、 文 件 保存 和 另存 为 功能 


. 首先 来 分 析 下 整个 流程 ， 当 新 建文 件 时 ， 要 考虑 是 否 保存 正在 编辑 的 文件 ， 如 果 需 要 保 
es 生 行 保存 或 者 另存 为 操作 。 下 面 我 们 根据 这 里 的 分 析 
来 添加 需要 的 函数 和 对 象 。 


2 打开 上 一 篇 完成 的 项 目 ， 然 后 先 在 main.cpp 文件 中 添加 代码 来 保证 代码 中 可 以 使 用 中 文 
字符 。 首先 添加 #include <QTextcodec> 头 文件 包含 ， 然 后 在 主 函 数 中 添加 如 下 代码 : 


QTextCcodec: :setCcodecForTr(QTextCcodec: :codecForLocale() ) ; 


3 在 mainwindow.h 文件 中 添加 public 隐 数 声明 : 


void newFile(); // 新 建 操作 
boolwmaybesaye (全 多 三 
bool Save() // 从 
bool saveAs(); /NO 
bool saveFile(const ee Br 保存 文件 










人 入 A 车工 于 -fi 人 J 户 大 - 
第 6 篇 基础 (六 ) 实现 Qt 文本 编辑 


这 里 的 几 个 函数 就 是 用 来 完成 功能 逻辑 的 ， 下 面 我 们 会 添加 它们 的 定义 来 实现 相应 的 功能 。 
因为 这 几 个 功能 联系 紧密 ， 所 以 这 几 个 函数 会 相互 调用 。 


4 然后 添加 private 变量 定义 : 


// 为 丨 表示 文件 没有 保存 过 ， 为 假 表 示 文件 已 经 被 保存 过 了 
bool isUntitled; 

// 保存 当前 文件 的 路 径 

QString curFile; 


这 里 的 isUntitled 是 一 个 标志 y 用 来 判断 文档 是 否 被 保存 过 o 而 curFile 用 来 保存 当前 打开 
的 文件 的 路 径 。 


5 . 下面 到 mainwindow.cpp 文件 ， 先 添加 头 文件 : 


#include <QMessageBox> 
#include <QPushButton> 
#include <QFileDialog> 
#include <QTextStream> 
然后 在 构造 函数 中 添加 如 下 代码 来 进行 一 些 初始 化 操作 : 
// 初始 化 文件 为 未 保存 状态 
isUntitled = true; 

// 初始 化 文件 名 为 "未 命名 ,txt" 
curFile = tr(" 未 命名 .txt"); 
// 初始 化 窗口 标题 为 文件 名 
setwindowTitle(curFile); 


这 里 设置 了 在 启动 程序 时 窗口 标题 显示 文件 的 名 字 ， 效 果 如 下 图 所 示 。 


文件 (有 ”篇 如 (E) ”者 助 (H) 
叶 访 电信 % 昌 所 的 
| 





6 .下 面 添加 那 几 个 函数 的 定义 。 


首先 是 新 建文 件 操 作 的 函数 : 
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这 里 先 使 用 maybesave() 来 判断 文档 是 否 需要 保存 


void Mainwindow: :newFile() 


If (maybeSave()) { 


isUntitled = true; 

curFile = tr(" 未 命名 .txt"); 
setwindowTitle(curFile); 
ui->textEdit->clear(); 
Ui->textEdit->setVisible(true); 


初始 化 。 下 面 是 maybesave() 函数 的 定义 : 


这 
选 
面 


bool Mainwindow: :maybeSave() 


{ 


里 
择 是 


vf 


ee 变更 改 了 
如 有 果 葡 档 破 更 改 了 


下 站 (ui- >textEdit- A >isModified()) { 


oh 


} 
A 


OMe esau obo i 

box. setWwindowTitle(tr(" 警 告 ")); 

box.setIicon(QMessageBox: :Warning); 

box.setText(curFile + tr(" 尚未 保存 ， 是 否 保 存 ?")); 

QPushButton *yesBtn = box.addButton(tr(" 是 (&Y)")， 
QMessageBox: :YesRole); 

box.addButton(tr(" 否 (&N)")，QMessageBox: :NORole)， 


QPushButton *cancelBut = box,addButton(tr(" 取 消 " )， 


QMessageBox: :RejectRole ) 
box.exec(); 
if (box.clickedButton() == yesBtn) 
return save(); 
else if (box.clickedButton() == cancelBut) 
return false; 


楷 没 右 被 看 功 Ss 


如 果 文 档 没 有 被 更 改 ， 则 直接 返回 true 


meturmm Er ue 


， 如 果 已 经 保存 完了 ， 则 新 建文 档 ， 并 进 和 


2 了 isModified() 来 判断 文档 是 否 被 更 改 了 ， 如 果 被 更 改 了 ， 则 弹出 对 话 框 让 用 户 


0 或 者 取消 操作 。 如 果 取 消 操作 ， 那 么 就 返 


是 save() 函数 的 定义 : 


bool Mainwindow: :save() 


{ 


} 


if (isUntitled) { 


return saveAs(); 


} else { 


} 


return saveFile(curFile); 


回 false ， 什 么 都 不 执行 。 下 


这 里 如 果 文 档 以 前 没有 保存 过 ， 那 么 执行 另存 为 操作 saveAs() ， 如 果 已 经 保存 过 ， 那 么 调 


用 saveFile() 执行 文件 保存 操作 。 下 面 是 saveAs() 函数 的 定义 : 


bool Mainwindow: :saveAs() 
{ 
QString fileName = QFileDialog::getSaveFileName(this, 
tr(" 另 存 为 ")，curFile); 
if (fileName.isEmpty()) return false; 
return saveFile(fileName); 


} 


这 里 使 用 QFilepialog 来 实现 了 一 个 另存 为 对 话 框 ， 并 且 获 取 了 文件 的 路 径 ， 然 后 使 用 文件 路 
径 来 保存 文件 。 下 面 是 saveFile() 函数 的 定义 : 


bool MainWindow: :saveFile(const QString &fileName) 


{ 
QFile fiLle(fiLleName); 


If (!file.open(QFile::Writeonly | QFile::Text)) { 


// %1 和 %2 分 别 对 应 后 面 arg 两 个 参数 ，/n 起 换行 的 作用 
es eA es tr(" 多 文档 编辑 器 " )， 
tr(" 无 法 写 入 文件 %1 : /n %2") 
.arg(fileName).arg(file.errorSstring())); 
returm false; 


} 
OTDR 0 
// 鼠标 指针 变 为 : 状态 

QApplication: a :WaitCursor); 
Out << Ui- >textEdit- se 


// 和 鼠标 指针 恢复 原来 的 
QApplication: 人 > 
isUntitled = Ds, 





// 获得 文件 的 标准 路 4 
curFile = 人 canonicalFilePath(); 
setwindowTitle(curFile); 

retom ere, 


该 函数 执行 卜 正 的 文件 保存 操作 。 先 是 使 用 一 个 QFile 类 对 象 来 指向 要 保存 的 文件 ， 然 后 将 
其 使 用 写 入 方式 打开 。 打 开 后 再 使 用 QTextstream 文本 流 将 编辑 器 中 的 内 容 写 入 到 文件 中 。 


这 里 使 用 了 很 多 新 的 类 ， 以 后 我 们 对 自己 不 明白 的 类 都 可 以 去 帮助 里 进行 查找 ， 这 也 许 是 我 
们 以 后 要 做 的 最 多 的 一 件 事 了 。 对 于 其 中 的 英文 解释 ， 我 们 最 好 想 办 法 弄 明 白 它 的 大 意 ， 其 

实 网 上 也 有 一 些 中 文 的 翻译 ， 但 最 好 还 是 从 一 开始 就 尝试 着 看 英文 原版 的 帮助 ， 这 样 以 后 才 
不 会 对 中 文 翻译 产 生 依赖 。 


7 设置 菜单 功能 。 mainwindow.ui 文件 ， 在 图 形 界 面 窗口 下 面 的 Action 编辑 器 里 ， 我 们 
右 击 “ 新 建 " 菜 单一 条 ， 选 择 “ 转 到 槽 ”， 然 后 选择 triggered() ， 进 入 其 触发 事件 模 。 如 下 图 所 
示 。 
















































































使 用 
可 action New 区 新 建 (&N)[ 一 
加 action Open 加 打开 (&O) 
里 action Close 网 关闭 (&C) 
加 action_ Save 区 保存 (&S) 
较 acti...veAs 区 另存 为 (& 
中 action Exit 区 授 出 (&X) 








同 理 ， 进 入 其 他 两 个 菜单 的 档 ， 将 相应 的 操作 的 函数 写 入 槽 中。 最 终 代码 如 下 : 


void MainWindow: :on_action_New_triggered() 
newFile( ); 

void MainWindow: :on_action_Save_triggered() 

{ 


save(); 


void MainWindow: :on_action_SaveAs_triggered() 





saveAs(); 


现在 运行 程序 ， 已 经 能 够 实现 新 建文 件 ， 保 存 文件 ， 文 件 另 存 为 的 功能 了 。 
二 、 实 现 打 开 、 关 闭 、 退 出 、 撤 销 、 复 制 、 剪 切 、 粘 贴 等 功能 
先 到 mainwindow.h 文件 中 添加 public 函数 声明 : 


bool loadFile(const QString &fileName); // 加 载 文件 


然后 到 mainwindow.cpp 文件 中 添加 该 函数 的 定义 : 


bool Mainwindow: :loadFile(const QString &fileName) 
{ 
QFile file(fileName); // 新 建 QFile 对 和 象 
If (!file.open(QFile::Readonly | QFile::Text)) { 
QMessageBox: :warning(this，tr(" 多 文档 编辑 器 ")， 
tr(" 无 法 读 取 文件 %1:\n%2.") 
.arg(fileName).arg(file.errorSstring())); 
return false; // 只 读 方式 打开 文件 ， 出 错 则 提示 ， 并 返回 false 


} 

QTextStream in(&file); // 新 建文 本 流 对 象 

QAppJlication: :setoverridecursor(Qt: :WaitCursor ) 

// 读 取 文 件 的 全 部 文本 内 容 ， 并 添加 到 编辑 器 中 

ui->textEdit->setPlainText(in.readAll( )); QApplication: :restoreOverrideCursor( 


); 


// 设置 当前 文件 

curFile = QFileInfo(fileName).canonicalFilepPath(); 
setwindowTitle(curFile); 

FeLun nue 


这 里 的 操作 和 saveFile() 函数 是 相似 的 。 下 面 到 设计 模式 ， 分 别 进 入 其 他 几 个 动作 的 触发 信 
号 的 档 ， 更 改 如 下 : 
et 


void MainwWindow: :on_action_ Open_triggered() 


if (maybeSave()) { 


QString fileName = QFileDialog::getOpen 


// 如 果 文 件 名 不 为 室 ， 则 加 载 文件 
If (!fileName.isEmpty()) { 
loadFile(fileName); 


ui->textEdit->setVisible(true); 





} 
} 
天 
WE 
void MainwWindow: :on_action_Close_ triggered() 
{ 
If (maybeSave()) { 
Ui->textEdit->setVisible(false); 
} 
a 
全 
void Mainwindow::on_action_EXxit_triggered() 
{ 





on action Close 人 
qApp->quit(); 








} 
// 撤销 动 1 
void Ma nnd :on_action_ Undo_triggered() 
{ 
ui->textEdit->undo(); 
} 
WE 
void MainWindow: :on_action_Cut_triggered () 
{ 
ui->textEdit->cut(); 
} 
// 呈 制 动 
void a :on_action_ Copy_triggered() 
{ 
ui->textEdit->copy(); 
ee 
// 祝 贴 动作 
void MainwWindow: :on_action_Paste_ triggered() 
{ 
ui->textEdit->paste(); 
} 


这 里 可 以 看 到 ， 复 制 


数 。 虽 然 实现 了 退出 功能 ， 但 是 ， 有 时 候 会 使 用 窗 


们 需要 使 用 关闭 事件 处 理 函 数 来 实现 相应 的 功能 。 


下 面 到 mainwindow.h 文 件 中 ， 先 添加 头 
明 : 


文件 包 


FileName(this); 


口 标题 栏 的 关闭 按钮 来 关闭 程序 ， 


含 #include <QCloseEvent> 


、 粘 贴 等 常用 功能 是 QTextEdit 已 经 实现 的 ， 我 们 只 需要 调用 相应 的 郊 
这 里 我 


protected : 
void closeEvent(QCloseEvent *event); // 关闭 事件 


然后 到 mainwindow.cpp 文 件 中 添加 该 函数 的 定义 : 
void Mainwindow: :closeEvent(QCloseEvent *event ) 





{ 
// 如 果 maybeSave( ) 函数 返回 true， 则 关闭 程序 
If (maybeSave()) { 
event->accept(); 
} else {  // 否则 忽略 
event->ignore( ); 
} 
} 


关于 事件 的 概念 ， 会 在 后 面 的 教程 中 讲解 。 


结语 


号 


这 一 篇 中 实现 了 最 基本 的 编辑 功能 ， 现 在 还 剩 下 查找 和 帮助 菜单 没有 实现 ， 这 个 会 在 下 一 篇 
介绍 。 ee 习 一 个 更 完整 的 文本 编辑 器 的 实现 ， 可 以 参考 《Qt 及 QtQuick 开 发 实 
青 解 》 一 书 的 第 


涉及 到 的 源码 下 载 


第 7 篇 基础 (七 ) 实现 Qt 文本 查找 功能 


这 一 篇 我 们 来 加 上 查找 菜单 的 功能 。 因 为 要 涉及 Qt Creator 的 很 多 实用 功能 ， 所 以 单独 用 一 篇 
文章 来 介绍 。 以 前 都 用 设计 器 设计 界面 ， 而 这 次 我 们 用 代码 实现 一 个 简单 的 查找 对 话 框 。 除 
了 讲解 怎么 实现 查找 功能 ， 这 里 还 详细 地 说 明了 怎么 进行 类 中 方法 的 查找 和 使 用 。 其 中 也 讲 
解 了 Qt Creator 程 序 中 怎样 在 函数 的 声明 位 置 和 定义 位 置 问 进行 快速 切换 。 


环境 是 : Windows 7 + Qt 4.8.1+ Qt Creator 2.4.1 


目录 


一 、 添 加 查找 对 话 框 二 、 实 现 查找 功能 


正文 
一 、 添 加 查找 对 话 框 


1 我 们 继续 在 前 一 篇 程序 的 基础 之 上 进行 更 改 。 首 先 到 mainwindow.h 文件 中 添加 类 的 前 置 声 
明 (对 于 什么 是 前 置 声明 ， 以 及 这 样 使 用 的 好 处 ， 可 以 在 网 上 百度 ) 


class QLineEdit; 
class QDialog; 


前 置 声明 所 在 的 位 置 跟 头 文件 包含 的 位 置 相同 。 
然后 在 private 中 添加 对 象 定义 : 


QLineEdit *findLineEdit; 
QDialog *findD1g; 


下 面 再 添加 一 个 私有 楷 声 明 : 


private slots: 
void showFindText(); 


楼 可 以 看 做 是 一 个 函数 ， 只 不 过 可 以 和 信号 进行 关联 。 


2 .下 面 到 mainwindow.cpp 文件 中 ， 因 为 前 面 在 头 文件 中 使 用 了 类 的 前 置 声明 ， 所 以 这 里 需要 
先 添加 头 文件 包含 : 


#include <QLineEdit> 
#include <QDialog> 
#include <QPushButton> 


然后 在 构造 函数 中 进行 初始 化 操作 ， 即 添加 如 下 代码 : 


findDlg = new QDialog(this); 

findDlg->setwindowTitle(tr(" 查 找 ")); 

findLineEdit = new QLineEdit(findD1g); 

QPushButton *btn= new QPushButton(tr(" 查 找 下 一 个 ")，findD1g); 
QVBoxLayout *layout= new QVBoxLayout(findD1g); 
layout->addwidget(findLineEdit); 

layout->addwidget(btn); 

connect(btn, SIGNAL(clicked()), this, SLOT(showFindText())); 


这 里 创建 了 一 个 对 话 框 ， 然 后 将 一 个 行 编辑 器 和 一 个 按 馈 放 到 了 上 面 ， 并 使 用 布局 管理 器 
a 
的 定义 。 

这 里 先 说 一 个 可 以 快速 从 头 文件 声明 处 创建 函数 定义 的 方法 。 到 mainwindow.h 文件 中 ， 将 
和 鼠标 定位 到 showFindText() 函数 上 ， 然 后 点 击 右键 ， 在 弹出 的 菜单 中 选择 “ 重 
构 ” 一 “在 mainwindow.cpp 添加 声明 ”， 或 者 直接 使 用 Alt+Enter 快捷 键 ， 这 样 就 会 直接 
在 mainwindow.cpp 文件 中 添加 函数 定义 ， 并 跳 转 到 该 函数 处 。 如 下 图 所 示 。 


rivate slots: 


vold BhowE ni 局 
跟踪 光标 位 置 的 符号 F2 
Ea 在 方法 声明 /定义 之 间 切 换 。。 Shift+F2 

Ui::MainWir ee 区 

查找 何 处 被 使 用 Ctrl+Shift+U 
> as ZN 2 ” 
i 为 真 表示 3 打 分 层 Ctr|+Shift+T ; 保存 过 了 
bool isUntl 二 网 » 重 命名 光标 所 在 符号 Ctrl+Shift+R 
人 a 在 mainwindow.cpp 沃 加 声明 

// 保存 当前 3 Es Ctrl+I 

选中 区 域 注 释 / 反 注释 Ctrl+/ 


QString cuy 





二 、 实 现 查找 功能 


下 面 我 们 来 分 步骤 完成 showFindText() 函数 。 在 讲解 过 程 中 会 涉及 一 些 很 实用 的 功能 的 介 


` 先 在 函数 中 添加 一 行 代码 来 获取 行 编 辑 器 中 要 查找 的 字符 串 。 


void Mainwindow: :showFindText() 


{ 
QString str = findLineEdit->text(); 


2 在 下 一 行 ， 我 们 先 输入 ui ， 然 后 按 下 键盘 上 的 >. 键 ， 这 时 就 会 自动 输入 . 或 者 -> ， 
并 且 列 出 ui 上 所 有 可 用 部 件 的 对 象 名 。 如 下 图 所 示 。 


第 7 篇 基础 (七 ) 实现 Qt 文本 查找 功能 


void MainWindow: :showFindText () 


{ 
QsString str = findLineEdit->text (); 


Ui—> 

Haction Close |“ 
Saction Copy 
action Cut 
action Exit 
会 action Find 


3 ' 我们 要 输入 textEdit ， 先 输入 t ， 这 时 会 自动 弹出 textEdit ， 只 需要 按 下 回 车 键 即 可 。 
加 下 国际 这 3 












Ul 






void MainWindow: :showFindText () 


{ 
QString str = findLineEdit->text (); 


UiI 一 > 七 


H textEdit 


4 .下面 我 们 将 光标 放 到 textEdit 上 ， 这 时 就 会 出 现 QTextEdit 类 的 简单 介绍 ， 如 下 图 所 


5 . 按照 提示 ， 我 们 按 下 键盘 上 的 F1 键 ， 就 会 在 编辑 器 的 右 侧 打开 QTextEdit 类 的 帮助 文 
档 。 如 下 图 所 示 。 这 时 还 可 以 按 下 上 面 的 "切换 至 帮助 模式 "来 进入 到 帮助 模式 中 打开 该 文档 。 


WainWindow: :showFindText 0 v 行 号 : 235， 列 号 : 17 X ”切换 至 帮助 模式 4 
ui->tezxtEdit->paste O03; 四 Qt Reference Documentation ”全 
} QTextEdit Class Reference 图 






个 Home 六 Modules ~ QtGui svQTextEdit 


void MainWindow: :closegvent (QCloseEvent +*eVt 
The QTextEdit class 


{ . , E 
provides a widget that is used to ontents 
// 如 果 maybeSave() 函数 返回 true， 则 关闭 程序 “| eqit and display both plain and rich 
if (maybeSave()) { text More.. EU 
event->accept (); 。 
we Properties 
} else { // 否则 忽略 该 事件 #include <QTextEdit> Public Functions 
event->ignore(); * 
} 。 Public Slots 
} Inherits: QAbstractScrollArea. 。 Signals 


和 i 。 Protected Functions 
void MainWindow: :showFindText () Inherited by: QTextBrowser. Ey 
。 Detailed Description 


{ a List of allmembers, 
Qstring str = findLinepdit->text (); including inherited 。 Introduction and 
一 一 members Concepts 


ui->textEdit| 
上 mn Qt3 support members es。 UsingQTextEdit as a 
misnlav Wirinet 


6 我 们 在 该 类 的 public Functions 公共 函数 列表 中 发 现 有 一 个 find() 函数 。 如 下 图 所 示 。 
QList<ExtraSelection> extraSelections () const 


bool fnd (const QString & exp, QTextDocument::FindFlags options=0) 
QString fontFamily () const 
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7 从 字面 意思 上 可 以 知道 该 函数 应 读 
绍 处 。 如 下 图 所 示 。 


是 用 于 查找 功能 的 ， 我 们 点 击 该 函数 进入 到 它 的 详细 介 


、 


bool QTextEdit:find ( constQSstring & exp, QTextDocument::FindFlags 
options = 0) 


Finds the next occurrence of the string, exp, using the given options. Returns true if exp was found and changes the 
cursor to select the match; otherwise returns false 


8 根据 介绍 可 以 知道 该 函数 用 于 查询 指定 的 exp 字符 串 ， 如 果 找 到 了 就 将 光标 跳 转 到 查找 到 
的 位 置 ， 如 果 没 有 找到 就 返回 false 。 这 个 函数 还 有 一 个 QTextDocument: :FindFlags 参数 ， 为 
了 了 解 该 参数 的 意思 ， 我 们 点 击 该 参数 进入 其 详细 介绍 处 。 如 下 图 所 示 。 


enum QTextDocument:FindFlag 
flags QTextDocument::FindFlags 


This enum describes the options available to QTextDocument's find function. The options can be OR-ed together 
from the following list- 


Constant Value Description 
QTextDocument: :FindBackward 0x00001 Search backwards instead of forwards. 
By default find works case insensitive. Specifying this 
QTextDocument: :FindCaseSensitively 0x00002 option changes the behaviour to a case sensitive find 
operation. 
QTextDocument: :FindWholeWords 0x00004 Makesfind match only complete words. 


可 以 看 到 该 参数 是 一 个 枚 举 变量 ， 用 来 指定 查找 的 方式 ， 分 别 是 向 后 人 区 分 大 小 写 、 全 
词 匹 配 等 。 如 果 不 指定 该 参数 ， 默 认 的 是 向 前 查找 、 不 区 分 大 小 号、 该 字符 串 的 词 也 可 
以 查找 到 。 这 几 个 变量 还 可 以 使 用 | 符号 来 一 起 使 用 。 


9 ' 根据 帮助 ， 我 们 补充 完 该 行 代码 : 


ui->textEdit->find(str, QTextDocument: :FindBackward ) ; 
10 : 这 时 已 经 能 实现 查找 的 功能 了 。 但 是 我 们 刚才 看 到 find 的 返回 值 类 型 是 bool 型 ， 而 
且 ， 我 们 也 应 该 为 查找 不 到 字符 串 作 出 提示 。 将 这 行 代码 更 改 为 : 


If (!ui->textEdit->find(str, QTextDocument::FindBackward)) 


QMessageBox: :warning(this，tr(" 查 找 ")， 
tr(" 找 不 到 %1").arg(str)); 


到 这 里 查找 函数 就 基本 讲 完 了 。 


1 我 们 会 发 现 随 着 程序 功能 的 增强 ， 其 中 的 函数 也 会 越 来 越 多 ， 我 们 都 会 为 查找 某 个 函数 
的 定义 位 置 感到 头疼 。 而 在 QtCreator 中 有 几 种 快速 定位 函数 的 方法 。 





第 一 种 ， 在 函数 声明 的 地 方 直接 跳 转 到 函数 定义 的 地 方 。 例如 我 们 在 mainwindow.h 文件 

的 loadFile() 函数 上 点 击 和 鼠标 右键 ， 在 弹出 的 菜单 上 选择 “在 方法 声明 /定义 之 间 切 换 ”， 这 时 
就 会 自动 跳 转 到 mainwindow.cpp 文件 中 该 函数 的 定义 处 。 如 下 图 所 示 。 当 然 还 可 以 反 向 使 
用 0 





bool lLoaqd 切换 头 文件 / 源 文件 F4 e); 
AN 本 一 吕 [= F2 
在 方法 声明 /定义 之 间 切 换 Shift+F2 


第 二 种 ， 快 速 查看 一 个 文件 里 的 所 有 函数 。 可 以 在 编辑 器 正 上 方 的 下 拉 框 里 查看 正在 编辑 的 
文件 中 所 有 的 函数 的 列表 ， 点 击 一 个 函数 就 会 跳 转 到 指定 位 置 。 如 下 图 所 示 。 





MainWindow::MainWindow(QWidget *) 

H MainWindow::~MainWindow0 string 
人 MainWindow::newFile0 

i 4 MainWindow::maybeSave0 

本 } 人 MainWindow'::savel0 


Le retl 





Ea MainWindow::saveAs0 








13 QTextst 人 MainWindow::saveFile(const QString &) 


第 三 种 ， 使 用 类 视图 或 者 大 纲 视 图 。 在 项 目 列表 上 面 的 下 拉 框 中 可 以 更 改 查看 的 内 容 ， 如 果 
选择 为 类 视图 或 者 大 纲 ， 则 会 显示 文件 中 所 有 的 函数 的 列表 。 如 下 图 所 示 。 











4 
4 总 myMainWindow 过 | 本 区 QStF1lng i 
4 名 MainWindow | 加 

loadFile (const QString &) 7 /1/ 如 果 文 , 
MainWindow (QWidget * = 0) Ta if (1file 
D maybesave 0 174 loadI 
newFile 0 Ee 
H savel . UL- 
saveAs 1 a } 
savefile (const QString 8&) | } 
~MainWindow 0 5 下 } 
从 dloseEvent (QCloseEvent *) 179 








第 四 种 ， 使 用 查找 功能 查看 函数 的 所 有 调用 处 。 在 一 个 函数 名 上 点 击 鼠 标 右键 ， 然 后 选择 " 查 
找 何 处 被 使 用 "菜单 ， 这 时 就 会 在 下 面 的 搜索 结果 栏 中 显示 该 函数 所 有 的 使 用 位 置 。 我 们 可 以 
通过 点 击 一 个 位 置 来 跳 转 到 该 位 置 。 如 下 图 所 示 。 


第 7 篇 基础 (七 ) 实现 Qt 文本 查找 功能 





2 | 
22 void InewFile();  // 新 建 操作 | 
23 bool maybeSave (); // 判断 是 否 需 要 保存 

24 bool save(); // 保存 操作 

25 bool saveAs (); // 另存 为 操作 

26 bool saveFile(const QString &fileName); 
这 了 

28 bool loadFile(const QString &fileName); 
30 

= mri clntes 

ee C++ 传 用 : NainWindow: rr 到 





下 下 + 使 用 : NainWindow: :newFile 找到 3 个 匹配 
4 F\myMainWindow\mainwindow.cpp (2) 


45 void MainWindow: :newFile () 








<a DUD ME Window\mainwindow.h (1) 


12 * 最 后 ， 我 们 来 实现 界面 上 的 查找 功能 。 从 设计 模式 进入 查找 动作 的 触发 信号 的 醒 ， 更 改 
如 下 : 


void Mainwindow: :on_action_Find_triggered() 


findD1g->show( ); 
这 时 运行 程序 ， 效 果 如 下 图 所 示 。 


文件 (月 ” 编 霹 (E) ”帮助 (H) 
ETE 
作者 | yafeilinus 
qt 爱好 者 社区 a 二 于 


汰 ter. ore 








结语 


-器 
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讲 到 这 里 ， 我 们 已 经 很 详细 地 说 明了 怎样 去 使 用 一 个 类 里 面 未 接触 过 的 函数 ; 也 说 明了 Qt 
Creator 中 的 一 些 便捷 操作 。 可 以 看 到 ，Qt Creator 开 发 环境 ， 有 很 多 很 人 性 化 的 设计 ， 我 们 
应 该 熟练 应 用 它们 。 在 以 后 的 文章 中 ， 我 们 不 会 再 很 详细 地 去 用 帮助 来 说 明 一 个 函数 是 怎么 
来 的 ， 该 怎么 用 ， 这 些 应 该 自己 试 着 去 查找 。 


涉及 到 的 代码 


第 8 篇 基础 (入) 设置 Qt 状态 栏 


第 8 篇 基础 (和 八 ) 设置 Qt 状态 栏 


导语 


在 程序 主 窗口 QMainWindow 中 ， 主 要 包含 菜单 栏 ， 工 具 栏 ， 中 心 部 件 和 状态 栏 。 前 面 几 个 已 
经 讲 过 了 ， 这 一 篇 讲解 状态 栏 的 使 用 。 


环境 是 : Windows 7 + Qt 4.8.1 +Qt Creator 2.4.1 
。 一 、 添 加 动作 状态 提示 
自 


e 二 、 显 示 其 他 临时 信 各 
显示 永久 信息 


@ 
hn 
ph 


一 、 添 加 动作 状态 提示 


1 首先 还 是 打开 上 一 篇 完成 的 程序 。 对 于 菜单 动作 添加 状态 提示 ， 可 以 很 容易 的 在 设计 器 中 


2 下面 进 入 设计 模式 ， 在 Action 编 辑 器 中 选中 新 建 动 作 ， 然 后 在 右面 的 属性 编辑 器 中 将 
其 statusTip 更 改 为 “新 建文 件 ”。 如 下 图 所 示 。 





如 CCLL ULL NeW . WANGCLLULL 










4 | 











































名 称 使 用 
回 action New [IV|: 新建 (&N) Ctrl+N 
加 action Open 多 打开 (&O) Ctrl+O checkable ”| 回 
里 action Close 区 关闭 (&C) Ctrl+W 二 同 
师 adion_Save 加 保存 (&S) Ctrl+S sc 
加 acti..veAs 园 另存 为 (&A) enabled 
只 action_Exit [WW 返 出 (&) Ctrl+Q ”icon 四 document-new.png |: 
是 action_Undo 团 撤销 (&Z) Ctrl+Z > text 新 建 (&N) 
db action Cut 园 莫 切 (800) Ctrl+X b> iconText 新 建 (N) 
9 action_Copy 加 复制 (&C) Ctrl+C p> toolTip 新 建 (N) 
岛 action_paste 园 类 贴 (&V) Ctrl+V bp statusTip 新 建文 件 加 
8 action_Find 查找 (&F) Ctrl+F BD 


3 这 时 运行 程序 ， 当 光标 移动 到 新 建 动 作 上 时 ， 在 下 面 的 状态 栏 将 会 出 现 设 置 的 提示 。 如 下 
图 所 示 。 
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下 | 未 命名 .txt 
文件 (站 ”编辑 (E) ”帮助 (H) 


内 提包 $% 和 车 居 的 
ET 








我 们 可 以 按照 这 种 方式 来 设置 其 他 动作 的 状态 栏 提示 信息 。 
二 、 显 示 其 他 临时 信息 


状态 信息 可 以 被 分 为 三 类 : 临时 信息 ， 如 一 般 的 提示 信息 ， 上 面 讲 到 的 动作 提示 就 是 临时 信 
息 ; 正常 信息 ， 如 显示 页 数 和 行 号 ; 永久 信息 ， 如 显示 版 本 号 或 者 日 期 。 可 以 使 

用 showMessage() 函数 来 显示 一 个 临时 消息 ， 它 会 出 现在 状态 栏 的 最 左边 。 一 般 

用 addwidget() 函数 添加 一 个 QLabel 到 状态 栏 上 用 于 显示 正常 信息 ， 它 会 生成 到 状态 栏 的 最 
左边 ， 可 能 会 被 临时 消息 所 掩盖 。 


1 我 们 到 mainwindow.cpp 文件 的 构造 函数 最 后 面 添 加 如 下 一 行 代码 : 


ui->statusBar->showMessage(tr(" 欢 迎 访问 Qt 爱好 者 社区 1 ")); 


这 样 就 可 以 在 运行 程序 时 显示 指定 的 状态 提示 了 。 效 果 如 下 图 所 示 。 





rr 


而 未 命名 .txt 


文件 (站 ”编辑 (E) ”帮助 (H) 


守 访 网 人 信 % 居 所 的 








ui->statusBar->showMessage(tr(" 欢 迎 访 问 Qt 爱 好 者 社区 1 ")，2000); 


这 样 提 示 显 示 2000 毫 秒 即 2 秒 后 会 自动 消失 。 


2 下 面 我 们 在 状态 栏 添加 一 个 标签 部 件 用 来 显示 一 般 的 提示 信息 。 因 为 无 法 在 设计 模式 向 状 
态 栏 添加 部 件 ， 所 以 只 能 使 用 代码 来 实现 。 先 在 mainwindow.h 文件 中 添加 类 的 前 置 声 明 : 


class QLabel; 


然后 添加 一 个 私有 对 象 定 义 : 


QLabel] *statusLabel; 


下 面 到 mainwindow.cpp 文件 中 ， 先 添加 头 文件 声明 : 
#include <QLabel> 
然后 到 构造 函数 中 将 前 面 添加 的 : 


ui->statusBar->showMessage(tr(" 欢 迎 访问 Qt 爱好 者 社区 1")，2000) ; 


一 行 代码 注释 掉 ， 再 添加 如 下 代码 : 


statusLabel = new QLabel; 
statusLabel->setMinimumSize(150，20); // 设置 标 答 最 小 大 小 
statusLabel->setFrameShape(QFrame: :WinPpanel); // 示 
statusLabel->setFrameShadow(QFrame: :Sunken); // 人 设 章 标 2 
ui->statusBar->addwidget(statusLabel); 
statusLabel->setText(tr(" 欢 迎 访问 Qt 爱好 者 社区 | ")); 





这 时 运行 程序 ， 效 果 如 下 图 所 示 。 





[ 右 未 命名 .txt 
文件 (日 ”编辑 (E) ”帮助 (H) 


守 访 电信 % 曙 所 欣 














下 面 就 可 以 在 需要 显示 状态 的 时 候 ， 调 用 statusLabel 来 设置 文本 了 。 


如 果 要 显示 永 久 信 息 ， 要 使 用 addPermanentwidget() 鸥 数 来 添加 一 个 如 QLabel 一 样 的 可 以 显 
示 信 息 的 部 件 ， 它 会 生成 在 状态 栏 的 最 右 端 ， 不 会 被 临时 消息 所 掩盖 。 


我 们 在 构造 函数 中 添加 如 下 代码 : 


QLabel *permanent = new QLabel(this); 
permanent->setFrameStyle(QFrame::Box | QFrame::Sunken); 
permanent->setText( 

tr("<a href=\"http://www.yafeilinux.com\">yafeilinux.com</a>")); 
permanent->setTextFormat (Qt::RichText); 
permanent->setOpenExternalLinks(true); 
ui->statusBar->addPermanentwidget(permanent); 


这 样 就 在 状态 栏 的 右 侧 添加 了 一 个 网 站 的 超 链接 ， 点 击 该 链接 就 会 自动 在 浏览 器 中 打开 网 
站 。 运 行程 序 ， 效 果 如 下 图 所 示 。 








sot 
文件 (月 ”编辑 (E) ”帮助 (H) 


ECTEREFELILT 
| 





| 欢迎 访问 Qt 爱好 者 社区 ! | yafeilinuxcom 
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到 这 里 整个 文本 编辑 器 的 程序 就 算 写 完了 。 我 们 这 里 没有 写 帮助 菜单 的 功能 实现 ， 大 家 可 以 
自己 添加 。 而 且 程 序 中 也 有 很 多 漏洞 和 不 完善 的 地 方 ， 如 果 有 兴趣 ， 大 家 也 可 以 自己 修改 。 
因为 时 间 和 篇 幅 的 原因 ， 我 们 这 里 就 不 再 过 多 的 讲述 。 如 果 想 学 习 一 下 多 文档 编辑 器 的 实 
现 ， 可 以 参考 《Qt 及 Qt Quick 开 发 实战 精 解 》 一 书 的 多 文档 编辑 器 的 实例 。 


涉及 到 的 源码 


Qn 
OV 


第 9 篇 基础 ( 九 ) Qt 键盘 、 和 鼠标 事件 的 处 理 
导语 


事件 是 对 各 种 应 用 程序 需要 知道 的 由 应 用 程序 内 部 或 者 外 部 产生 的 事情 或 者 动作 的 通称 。 对 
于 初学 者 ， 总 会 对 Qt 中 信号 和 事件 的 概念 混淆 不 清 。 其 实 ， 记 住 事件 比 信 号 更 底层 就 可 以 
了 。 比 如 说 ， 我 们 用 和 鼠标 按 下 界面 上 的 一 个 按钮 ， 它 会 发 射 clicked() 单 击 信 号 ， 但 是 ， 它 


怎么 知道 自己 被 按 下 的 呢 ， 那 就 是 通过 鼠标 事件 处 理 的 。 这 里 可 以 看 到 ， 和 鼠标 事件 比 信号 更 
底层 。 


在 Qt 中 处 理事 件 有 多 种 方法 ， 不 过 最 常用 的 是 重 写 Qt 事 件 处 理子 数 。 这 里 我 们 就 以 鼠标 事件 
和 键盘 事件 为 例 来 进行 简单 的 介绍 。 


环境 是 : Windows 7 + Qt 4.8.1 +Qt Creator 2.4.1 


目录 


。 一 、 和 鼠标 事件 
。 二 、 键 盘 事件 


正文 


一 、 和 鼠标 事件 
1 新 建 Qt Gui 应 用 ， 项 目 名 称 为 myEvent ， 基 类 更 改 为 Qwidget ， 类 名 为 widget 。 
2 完成 项 目 创建 后 ， 在 设计 模式 向 界面 上 拖 入 一 个 Push Button 。 


3 .在 widget.h 文件 添加 鼠标 按 下 事件 处 理 函数 声明 : 


protected : 
void mousePressEvent(QMouseEvent *)， 


4 到 widget.cpp 文件 中 先 添加 头 文件 包含 : 


#include <QMouseEvent> 


然后 在 下 面 添加 函数 的 定义 : 


void Widget::mousePressEvent(QMouseEvent *e) 


{ 
ui->pushButton->setText(tr("(%1,%2)").arg(e->x()).arg(e->y())); 


} 


这 里 的 arg() 里 的 参数 分 别 用 来 填充 %1 和 %2 处 的 内 容 ， a 是 QString 类 中 的 一 个 静态 

函数 ， 使 用 它 就 可 以 在 字符 串 中 使 用 变量 了 。 其 中 x() 和 y() 分 别 用 来 返回 鼠标 光标 所 在 位 
置 的 x 和 y 坐标 值 。 这 样 ， 当 鼠标 在 界面 上 点 击 时 ， 按 钮 就 会 ee. 当前 和 鼠标 的 坐标 值 。 效 
果 如 下 图 所 示 。 


除了 和 鼠标 按 下 事件 ， 还 有 鼠标 释放 、 双 击 、 移 动 、 滚 轮 等 事件 ， 其 处 理 方式 与 这 个 例子 是 相 
似 的 。 


二 、 和 键盘 事件 


1 首先 在 widget.h 中 添加 protected 函数 声明 : 


void keyPressEvent(QKeyEvent *); 


2 然后 到 widget.cpp 中 添加 头 文件 包含 


#include <QKeyEvent> 


3 最 后 添加 键盘 按 下 事件 处 理光 数 的 定义 : 


void Widget::keyPressEvent(QKeyEvent *e) 


{ 
int x = ui->pushButton->x(); 
int y = ui->pushButton->y(); 
switch (e->key()) 
{f 
case Qt: :Key W : ui->pushButton->move(x, y-10); break; 
case Qt::Key_S : ui->pushButton->move(x, y+10); break; 
case Qt::Key A : ui->pushButton->move(x-10, y); break; 
case Qt::Key_D : ui->pushButton->move(x+10, y); break; 
} 

} 


这 里 我 们 先 获 取 了 按钮 的 位 置 ， 然 后 使 用 key() 函数 获取 按 下 的 按键 ， 如 果 是 指定 的 W、S、 
A、DD 等 按键 时 则 移动 按钮 。 所 有 的 按键 都 在 Qt::key 枚 举 变量 中 进行 了 定义 ， 大 家 可 以 在 帮 
助 文档 中 进行 查看 。 


结语 


除了 键盘 按 下 事件 ， 常 用 的 还 有 键盘 释放 事件 ， 这 里 就 不 再 举例 。 如 果 想 了 解 更 多 事件 方面 
的 知识 ， 可 以 参考 《Qt Creator 快 速 入 门 》 一 书 的 第 6 章 的 内 容 。 


第 9 篇 基础 ( 九 ) Qt 键盘 、 和 鼠标 事件 的 处 理 


涉及 到 的 源码 
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第 10 篇 基础 (十 ) Qt 定时 器 和 随机 数 


导语 


在 前 一 篇 中 我 们 介绍 了 键盘 和 鼠标 事件 ， 其 实 还 有 一 个 非常 常用 的 事件 ， 就 是 定时 器 事件 ， 
如 果 要 对 程序 实现 时 间 上 的 控制 ， 那 么 就 要 使 用 到 定时 器 。 而 随机 数 也 是 很 常用 的 一 个 功 
能 ， 在 我 们 要 想 产 生 一 个 随机 的 结果 时 就 要 使 用 到 随机 数 。 这 一 篇 我 们 就 来 简单 介绍 一 下 定 
时 器 和 随机 数 。 


环境 是 : Windows 7 + Qt 4.8.1 +Qt Creator 2.4.1 


目录 


e 一 、 定 时 器 
e 二 、 随 机 数 


Qt 中 有 两 种 方法 来 使 用 定时 器 ， 一 种 是 定时 器 事件 ， 另 一 种 是 使 用 信号 和 楷 。 一 般 使 用 了 多 
个 定时 器 时 最 好 使 用 定时 器 事件 来 处 理 。 


1 新 建 Qt Gui 应 用 ， 项 目 名 称 为 myTimer ， 基 类 选择 Qwidget ， 类 名 为 widget 。 


2 到 widget.h 文件 中 添加 函数 声明 : 


protected : 
void timerEvent(QTimerEvent *); 


然后 添加 私有 变量 定义 : 
int id1i, id2, id3; 


下面 到 设计 模式 ， 向 界面 上 拖 入 两 个 标签 部 件 Label 。 


CD 


4 下 面 进 入 widget.cpp 文件 ， 先 在 构造 函数 中 添加 如 下 代码 : 


id1 = startTimer(1000); // 开局 一 个 1 秒 定时 器 ， 返 回 其 ID 
id2 = StartTimer(2000 ) 
id3 = startTimer(10000); 


这 里 开局 了 三 个 定时 器 ， 分 别 返回 了 它们 的 id ， 这 个 id 用 来 区 分 不 同 的 定时 器 。 定 时 器 的 
时 间 单 位 是 毫秒 。 每 当 一 个 定时 器 溢出 时 ， 都 会 调用 定时 器 事件 处 理 函 数 ， 我 们 可 以 在 该 函 
数 中 进行 相应 的 处 理 。 


5. 下 面 添 加 定时 器 事件 处 理 函 数 的 定义 : 


void Widget::timerEvent(QTimerEvent *event) 


{ 
if (event->timerId() == id1) { // 判断 是 哪个 定时 器 
ui->label- >setText (tr("%1"). arg(dqrand()%10 ) ) ; 
} 


else if (event->timerId() == id2) { 
ui->label 2->setText(tr("hello world!")); 
} 


else 1{ 
qApp->quit( ); 


这 里 先 使 用 timerId() 元 数 返 回 了 溢出 的 定时 器 的 id ， 然 后 根据 该 id 来 判断 是 哪个 定时 器 
溢出 了 ， 并 进行 相应 的 处 理 。 每 当 第 一 个 定时 器 溢出 时 都 产生 一 个 小 于 10 的 随机 数 ; 当 第 二 
个 定时 器 溢出 时 ， 就 更 改 标签 的 文本 ; 当 第 三 个 定时 器 溢出 时 则 退出 应 用 程序 。 现 在 可 以 运 
行程 序 ， 查 看 效果 。 

6. 如 果 只 是 想 开 启 少 量 的 定时 器 ， 也 可 以 使 用 信号 和 横 来 实现。 


先 在 widget.h 中 添加 一 个 私有 槽 声明 


private Slots : 
void timerUpdate(); 


然 器 部 件 Line Edit ， 再 到 widget.cpp 中 添加 头 文 件 


(TT 
> 外 


#include <QTimer> 
#include <QDateTime> 


然后 在 构造 函数 中 添加 如 下 代码 : 


Dn *timer = new 人 

// 关 联 定时 器 溢出 信号 和 相应 的 楼 

Ee STGNAL (Emoout( )), this, SLOT(timerUpdate())); 
timer->start(1000); 


这 里 创建 了 一 个 定时 器 ， 并 将 其 溢出 信号 和 更 新 模 关 联 起 来 ， 最 后 使 用 start() 函数 来 开局 
定时 器 。 
下 面 添加 timerupdate() 函数 的 定义 : 


void Widget::timerUpdate() 














{ 本 
WE 统 现在 的 时 间 
opaterime t e _ = 和 :currentDateTime( ); 
// 设 统 时 | 格式 
Qstring str ei. toString("yyyy-MM-dd hh:mm:ss dddd"); 
// 在 标签 上 显示 时 间 
U1i- ee >setText(str); 
} 
这 里 在 行 编辑 器 中 显示 了 当前 的 时 间 。 现 在 可 以 运行 ， 查 看 效果 。 
二 、 戎 机 数 


关于 随机 数 ， 在 Qt 中 是 使 用 qrand() 和 qsrand() 两 个 函数 实现 的 。 在 前 面 的 程序 中 已 经 看 到 
了 qrand() 函数 的 使 用 ， 其 可 以 产生 随机 数 ， qrand()%16 可 以 产生 0-9 之 间 的 随机 数 。 要 想 产 
生 100 以 内 的 随机 数 就 是 wi60 。 以 此 类 推 。 


在 使 用 qrand() 函数 产生 随机 数 之 前 ， 一 般 要 使 用 qsrand() 函数 为 其 设置 初 值 ， 如 果 不 设 置 
初 值 ， 那 么 每 次 运行 程序 ， qrand() 都 会 产生 相同 的 一 组 随机 数 。 为 了 每 次 运行 程序 时 ， 都 
可 以 产生 不 同 的 随机 数 ， 我 们 要 使 用 qsrand() 设置 一 个 不 同 的 初 值 。 这 里 使 用 了 QTime 类 
的 secsTo() 函数 ， 它 表示 两 个 时 间 点 之 间 所 包含 的 秒 数 ， 比 如 代码 中 就 是 指 从 零点 整 到 当前 
时 间 所 经 过 的 秒 数 。 


下 面 先 在 widget.cpp 的 构造 函数 中 添加 如 下 代码 : 
qsrand(QTime(0, 0, 0).secsTo(QTime: :currentTime())); 


后 在 timerUpdate() 函数 的 最 后 添加 如 下 代码 : 


int rand = qrand() % 300 // 产生 300 以 内 的 正 整 数 
ui->lineEdit->move(rand, rand); 


这 样 ， 每 过 一 秒 ， 行 编辑 器 都 会 移动 到 一 个 随机 的 位 置 。 大 家 可 以 运行 ， 查 看 效果 。 


在 编程 中 定时 器 和 随机 数 很 有 用 ， 尤 其 是 在 一 些 需 要 特殊 效果 的 程序 里 ， 比 如 游戏 程序 。 如 
果 大 家 想 了 解 更 多 使 用 介绍 ， 可 以 参考 《Qt Creator 快 速 入 门 》 第 6 章 的 相关 内 容 。 


涉及 到 的 源码 下 载 


图 形 篇 


第 11 篇 2D 绘 图 (一 ) 绘制 简单 图 形 


导语 


Qt 中 提供 了 强大 的 2D 绘 图 系统 ， 可 以 使 用 相同 的 API 在 屏幕 和 绘图 设备 上 进行 绘制 ， 它 主要 
基于 QPainter 、 QPaintDevice 和 QPaintEngine 这 三 个 类 。 其 中 QPainter 用 来 执行 绘图 操 
作 ; QpaintDevice 提供 绘图 设备 ， 它 是 一 个 二 维 空间 的 抽象 ， 可 以 使 用 Qpainter 在 其 上 进行 
绘制 ; QPaintEngine 提供 了 一 些 接口 ， 可 以 用 于 Qpainter 在 不 同 的 设备 上 进行 绘制 。 

在 绘图 系统 中 由 QPainter 来 完成 具体 的 绘制 操作 ， QPainter 类 提供 了 大 量 高 度 优化 的 函数 
来 完成 GUI 编程 所 需要 的 大 部 分 绘制 工作 。 Qpainter 可 以 绘制 一 切 想 要 的 图 形 ， 从 最 简单 的 
一 条 直线 到 其 他 任何 复杂 的 图 形 ， 它 还 可 以 用 来 绘制 文本 和 图 片 。 QPainter 可 以 在 继承 

自 QpaintDevice 类 的 任何 对 象 上 进行 绘制 操作 。 


QPainter 一 般 在 一 个 部 件 的 重 绘 事件 〈 paint Event ) 的 处 理 防 数 paintEvent() 中 进行 绘 
制 ， 首 先 要 创建 QPainter 对 象 ， 然 后 进行 图 形 的 绘制 ， 最 后 销毁 QPainter 对 象 。 


环境 : Windows Xp + Qt 4.8.4+QtCreator 2.6.2 


。 一 、 绘 制 一 条 直线 
。 二 、 画 笔 和 画 刷 
。 三 、 绘 制 缴 线 


正文 
一 、 绘 制 一 条 直线 


1 新 建 Qt Gui 应 用 ， 项 目 名 称 为 painter 1 ， 类 信息 界面 不 用 修改 ， 即 类 名 为 Mainwindow ， 


基 类 为 QMainWindow ° 


2 .在 mainwindow.h 文件 中 添加 重 绘 事件 处 理 函 数 的 声明 : 


protected: 
void paintEvVvent (QPRaintEvent  *); 


所 有 的 绘制 操作 都 要 在 这 个 函数 里 面 完成 。 


3 . 下面 到 mainwindow.cpp 文件 中 先 需 要 添加 头 文件 包含 : 


#include <QPainter> 


然后 添加 该 函数 的 定义 : 


void Mainwindow: :paintEvent(QPaintEvent *) 


QPainter painter(this); 
painter.drawLine(QPointF(0, 0), QPointF(100, 100)); 


这 里 首先 为 该 部 件 创建 了 一 个 Qpainter 对 象 ， 用 于 后 面 的 绘制 。 然 后 使 用 drawLine() 函数 绘 
制 了 一 条 线段 ， 线 段 的 起 点 为 (9，6) ， 终 点 为 (1060，100) ， 这 里 的 单位 是 像素 。 效 果 如 下 
图 所 示 。 
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可 以 看 到 ， 在 Qt 窗口 里 面 ， (9，6) 点 就 是 窗口 的 左上 角 ， 但 这 里 是 不 包含 外 边框 的 。 而 
在 Mainwindow 主 窗口 里 面 绘制 时 ， 左 上 角 并 不 是 指 中 心 区 域 的 左上 角 ， 而 是 包含 了 工具 栏 。 


4 我们 将 光标 定位 到 Qpainter 类 名 上 ， 然 后 按 下 键盘 上 的 Fi 按键 ， 这 时 会 自动 跳 转 到 该 类 


的 帮助 页 面 。 当 然 ， 也 可 以 到 帮助 模式 ， 直 接 索 引 查找 该 类 名 。 在 帮助 里 面 我 们 可 以 看 到 很 
多 相关 的 绘制 函数 ， 如 下 图 所 示 。 


Ny 


void drawArc {const QRectF & rectangle, int startAngle, int spanAngile ) 

void drawArc (const QRect & rectangle, int startAngle, int spanAngie ) 

void drawATrc {( intx, int y, int width, int height int startAngle, int sparnAngle ) 
void drawChord ( const QRectF & rectangle, int startAngle, int spanAngle ) 
void drawChord ( const QRect & rectangle, int startAngile, int spanAngie ) 
void drawChord (int x, int y, int wigth, int height int startAngle, int spanAngle ) 
void drawConvexPolygon ( const QPointF * points, int pointCount ) 

void drawConvexPolygon ( const QPoint* points, int pointCount ) 

void drawConvexPolygon ({ const QPolygonF & polygon ) 

void drawConvexPolygon ( const QPolygon & polygon ) 


unid rrawFllinca { rnnct NPoartF & rortonnlo :1 


5. 我 们 任意 点 击 一 个 函数 名 ， 就 会 跳 转 到 该 函数 的 介绍 段落 。 例 如 我 们 点 
击 drawEllipse() 元 数 ， 就 跳 转 到 了 该 函数 的 介绍 处 ， Sy 一 个 例子 。 如 下 图 所 示 。 
我 们 可 以 直接 将 例子 里 面 的 代码 复制 到 paintEvent() 函数 里 面 ， 测 试 效果 。 


void QPainter:drawEllipse ( const QRectF & rectangle ) 


Draws the ellipse defined by the given rectangle 


A filled ellipse has a size of rectangle.size(). A stroked ellipse has a Size of rectangle.size() plus the pen width 


QRectF rectangle {10.0, 20.0, 80.0, 60.0)，; 


RFalinter Don rt ls 


painter.drawEllipse (rectangle) 


笔 和 画 刷 


| 
m 


1 我 们 先 将 paintEvent( ) 有 函数 的 内 容 更 改 如 下 : 


void Mainwindow: :paintEvent(QPaintEvent *) 


{ 
QPainter painter(this); 
QPen pen; // 盏 笔 
pen.setColor(QColor(255, 0, 0)); 
QBrush brush(QColor(909，255，0，125)); // 画 刷 
painter.setPen(pen); // 添 加 画笔 
painter.setBrush(brush); // 添 加 画 刷 
painter .drawRect(50，50，200，100); // 绘 制 矩形 


里 分 别 新 建 了 一 个 画笔 qpen ， 和 画 刷 QBrush 。 其 中 画笔 使 用 了 setcolor() 函数 为 其 设置 
本 色 ， 而 画 刷 是 在 构建 的 时 候 直 接 为 其 设置 的 颜色 。 这 里 的 颜色 都 是 使 用 的 Qcolor 类 兴 
的 ， 里 面 如 果 是 三 个 参数 ， 那 么 分 别 是 红 、 绿 、 蓝 分 量 的 值 ， 也 就 是 经 常 说 的 rgb， 取 值 范 
都 是 0-255， 比 如 这 里 的 (255，0，0) 就 表明 红色 分 量 为 255， 其 他 分 量 为 0， 那 么 ae 
色 。 如 果 是 四 个 参数 ， 最 后 一 个 参数 alpha 是 设置 透明 度 的 ， 取 值 范围 也 是 0-255,0 表 示 完 全 
透明 ， 而 255 表 示 完 全 不 透明 。 


第 11 篇 2D 绘 图 (一 ) 绘制 简单 图 形 


然后 我 们 将 画笔 和 画 刷 设置 到 了 painter 上 ， 并 使 用 drawRect() 绘制 了 一 个 矩形 ， 其 左上 和 角 
顶点 在 (56，56) ， 宽 为 200， 高 为 100。 运 行程 序 ， 效 果 如 下 图 所 示 。 


” EER plibn 加 加 四 





2 . 画笔 还 有 许多 其 他 的 设置 ， 可 以 查看 该 类 的 帮助 文档 。 例 如 ， 可 以 使 用 pen.setstyle() 来 
设置 画笔 样式 ， 可 用 的 画笔 样式 如 下 图 所 示 。 


Qt provides several built-in styles represented by the Qt::PenStyle enum: 


Qt::SolidLine 





Qt::DashDotLine Qt::DashDotDotLine Qt::CustomDashLine 


3 务 刷 也 有 很 多 其 他 设置 ， 这 个 也 可 以 查看 其 帮助 文档 。 在 Qt 中 为 画 刷 提供 了 一 些 可 用 的 样 
式 ， 可 以 使 用 setstyle() 函数 来 设置 。 如 下 图 所 示 。 
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Qt::Dense3pattern Qt::Dense4Pattern Qt::DenseSPpattern 





Qt::Dense6Pattern Qt::Dense7Pattern 而 ::NoBrush 
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Qt::BDiagPattern Qt::FDiagPattern :DiagCrossPattern 


Qt::Linear GradientPattern Qt::RadialGradientPattern Qt::ConicalGradientPpattern 





Qt:: TexturePattern 
这 里 面包 含 了 渐变 填充 效果 ， 这 个 会 在 下 一 节 讲 到 。 


4 .下 面 我 们 写 一 个 简单 的 例子 演示 一 下 。 将 paintEvent() 有 函数 更 改 如 下 : 


void Mainwindow: :paintEvent(QPaintEvent *) 
{ 
QPainter pazmter(thys) 
QPen pen(QEt :Dot LLne)y 
QBrush brush(Qt::blue); 
brush.setstyle(Qt::HorPpattern); 
painter.setPen(pen); 
painter.setBrush(brush); 
painter.drawRect(50,50,200,200); 


这 里 的 颜色 使 用 了 Qt 预定 义 的 颜色 ， 可 以 在 帮助 中 索引 Qt::6Globalcolor 关键 字 查 看 。 如 下 图 


所 示 。 


第 11 篇 2D 绘 图 (一 ) 绘制 简单 图 形 


enum Qt::GlobalColor 


Qt's predefined QColor objects: 


Constant 
Qt: :white 


Qt: :black 

Qt: :red 

Qt: :darkRed 

Qt: :green 

Qt: :darkGreen 
Qt: :blue 

Qt: :darkBlue 
Qt: :cyan 

Qt: :darkCyan 
Qt: :magenta 

Qt: :darkMagenta 
Qt: :Yellow 

Qt: :darkYellow 
Qt: :gray 

Qt: :darkGray 
Qt: :lightGray 
Qt::transparent 
Qt: :color0 

Qt: :colorl 


Value 
3 


2 


Description 

White (##FT) 

Black (#000000) 

Red (#0000) 

Dark red {#800000) 
Green ({#00ff00) 

Dark green (#008000) 
Blue {#0000 人 fT) 

Dark blue {#000080) 
Cyan {#00ff) 

Dark cyan (#008080) 
Magenta (#00f) 

Dark magenta {#800080) 
Yellow (#00) 

Dark yellow {#808000) 
Gray (#a0a0ad) 

Dark gray (#808080) 
Light gray (#c0cO0c0) 
atransparent black value (i.e., QColor(0, 0, 0, 0)) 
0 pixel value (for bitmaps) 
1 pixel value {for bitmaps) 


现在 运行 程序 ， 效 果 如 下 图 所 示 。 
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第 11 篇 2D 绘 图 (一 ) 绘制 简单 图 形 


enum Qt::GlobalColor 


Qt's predefined QColor objects: 


Constant Value 
Qt: :White 芒 
Qt: :black 2 
Qt: :red 7 
Qt: :darkRed 3 
Qt: :green 8 
Qt: :darkGreen 14 
Qt: :blue 9 
Qt: :darkBlue 45 
Qt: :cyan 10 
Qt: :darkCyan 1é6 
Qt: :magenta 11 
Qt: :darkMagenta 17 
Qt: :Yellow 让 2 
Qt: :darkYellow 18 
Qt: :gray 
Qt: :darkGray 4 
Qt: :lightGray 五 
Qt::transparent 19 
Qt: :color0 0 
Qt: :colorl 1 


三 、 绘 制 弧 线 


为 了 帮助 大 家 学 习 ， 这 里 再 举 一 个 绘制 缴 线 的 例子 ， 其 实在 帮助 文档 中 已 经 给 出 了 这 个 例 


子 。 如 下 图 所 示 。 
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Description 

White (#HFT) 

Black (#000000) 

Red (#0000) 

Dark red (#800000) 
Green ({#00ff00) 

Dark green (#008000) 
Blue {#0000 人 ff) 

Dark blue {#000080) 
Cyan {#00ff) 

Dark cyan (#008080) 
Magenta (#00f) 

Dark magenta {#800080) 
Yellow (#00) 

Dark yellow {#808000) 
Gray (#a0a0a4) 

Dark gray (#808080) 
Light gray (#c0cO0c0) 
atransparent black value {i.e., QColor(0, 0, 0, 0)) 
0 pixel value (for bitmaps) 
1 pixel value {for bitmaps) 


回回 加 
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我 们 将 paintEvent() 函数 更 改 如 下 : 


void Mainwindow: :paintEvent(QPaintEvent *) 






{ 

QRectFE reectangle(1o0 20°0 9800, Bo (ON pe /Aa 

int startAngle = 30 * 16; 有 度 

int spanAngle = 120 * 16; // 

QPainter pazmter (Enrs)y 

painter.drawArc(rectangle, startAngle, spanAngle); 
} 


这 里 要 说 明 的 是 ， 画 缴 线 时 ， 角 度 被 分 成 了 十 六 分 之 一 ， 就 是 说 ， 要 想 为 30 度 ， 就 得 
是 30*16 。 它 有 起 始 角 度 和 跨度 ， 还 有 位 置 矩 形 ， 要 想 画 出 自己 想 要 的 缴 线 ， 就 要 有 一 定 的 
几何 知识 了 。 这 里 就 不 再 祥 述 。 


这 一 节 我 们 只 是 简单 介绍 了 一 下 怎么 使 用 Qpainter 在 窗口 界面 上 进行 绘制 ， 还 涉及 到 了 画 
笔 、 画 刷 ， 以 及 使 用 帮助 文档 的 一 些 内 容 。 如 果 要 更 加 系统 、 详 细 的 学 习 这 些 基 础 知识 ， 可 
以 查看 《Qt Creator 快 速 入 门 》 的 第 10 章 。 


涉及 到 的 源码 下 载 


第 12 篇 2D 绘 图 (二 ) 渐变 卉 充 


导语 


在 前 一 节 提 到 了 在 画 刷 中 可 以 使 用 渐变 填充 。 QGradient 类 就 是 用 来 和 QBrush 一 起 指定 渐变 
填充 的 。Qt 现 在 支持 三 种 类 型 的 渐变 填充 : 
。 线性 渐变 (linear gradient) 在 开始 点 和 结束 点 之 间 插 入 颜色 ; 


。 辐射 渐变 (radial gradient) 在 焦点 和 环绕 它 的 圆 环 间 插 入 颜色 ; 
。 锥 形 渐变 (Conical) 在 圆心 周围 插入 颜色 。 


这 三 种 渐变 分 别 由 QGradient 的 三 个 子 类 来 表示 ， QLinearGradient 表示 线性 渐 
变 ， QRadialGradient 表示 辐射 渐变 ” QConicalGradient 表示 锥 形 渐变 。 


环境 : Windows Xp + Qt 4.8.4+Qt Creator2.6.2 


e 一 、 线 性 渐变 
。 二、 辐射 渐变 
三 、 锥 形 渐 变 


@ 


正文 
一 、 线 性 渐变 


1 我 们 仍然 在 上 一 节 创 建 的 项 目 中 进行 讲解 。 更 改 paintEvent() 函数 如 下 : 


void Mainwindow: :paintEvent(QPaintEvent *) 


// 线 性 渐变 

QLinearGradient linearGradient(QPointF(40, 190), QPointF(70, 190)); 
// 插 入 颜色 

linearGradient.setColorAt(0, Qt::yellow); 
linearGradient.setColorAt(0.5, Qt::red); 
linearGradient.setColorAt(1, Qt::green); 

// 指 定 渐变 区 域 以 外 的 区 域 的 扩散 方式 
linearGradient.setSpread(QGradient::RepeatSpread); 
// 使 用 渐变 作为 画 刷 

QPainter painter(this); 
painter.setBrush(linearGradient); 

painter .drawRect(10, 20, 90, 40); 


运行 程序 ， 效 果 如 下 图 所 示 。 
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2 ' 介绍 


对 于 线性 渐 

变 QLinearGradient::QLinearGradient ( const QPointF & start, constQPointF & finalStop ) 需 
要 指定 开始 点 start 和 结束 点 finalstop ， 然 后 将 开始 点 和 结束 点 之 间 的 区 域 进行 等 分 ， 开 
始点 的 位 置 为 0.06 ， 结 束 点 的 位 置 为 1.0 ， 而 它们 之 间 的 位 置 按照 距离 比例 进行 设 定 ， 然 后 
使 用 QGradient::setColorAt( qreal position, const QColor & color ) 函数 在 指定 的 位 

置 position 插入 指定 的 颜色 color ， 当 然 ， 这 里 的 position 的 值 要 在 0 到 1 之 间 。 


这 里 还 可 以 使 用 setspread() 函数 来 设置 填充 的 扩散 方式 ， 即 指明 在 指定 区 域 以 外 的 区 域 怎 样 
进行 填充 。 扩 散 方式 由 QGradient: :spread 枚 举 变量 定义 ， 它 一 共有 三 个 值 ， 分 别 

是 QGradient: :Padspread ， 使 用 最 接近 的 颜色 进行 填充 ， 这 是 默认 值 ， 如 果 我 们 不 使 

用 setspread() 指定 扩散 方式 ， 那 么 就 会 默认 使 用 这 种 方式 ; QGradient: :RepeatSpread ， 在 
渐变 区 域 以 外 的 区 域 重 复 渐变 ， QGradient::ReflectSpread ， 在 渐变 区 域 以 外 将 反射 渐变 。 在 
线性 渐变 中 这 三 种 扩散 方式 的 效果 下 图 所 示 。 要 使 用 渐变 填充 ， 可 以 直接 在 setBrush() 中 使 
用 ， 这 时 画 刷 风格 会 自动 设置 为 相对 应 的 渐变 填充 。 


第 12 篇 2D 绘 图 (二 ) 渐变 填充 


PadSpread (default) ReflectSpread RepeatSpread 
二 、 辐 射 渐 变 
1 继续 在 paintEvent() 函数 中 添加 如 下 代码 : 


// 辐 射 渐变 

QRadialGradient radialGradient(QPointF(100, 190),50,QPointF(275,200)); 
radialGradient.setColorAt(90, QColor(255, 255, 100, 150)); 
radialGradient.setCcolorAt(1, QColor(0, 090, 0, 50)); 
painter.setBrush(radialGradient); 

painter.drawEllipse(QPointF(100, 190), 50, 50); 


运行 程序 ， 效 果 如 下 图 所 示 。 


国生 EPR FldTln 
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第 12 篇 2D 绘 图 (二 ) 渐变 填充 


AN 


六 


对 于 辐射 渐 

变 QRadialGradient::QRadialGradient( const QPointF & center, qreal radius, const QPointF & 
需要 指定 圆心 center 和 半径 radius ， 这 样 就 确定 了 一 个 圆 ， 然 后 再 指定 一 个 焦 

点 focalPoint 。 焦 点 的 位 置 为 0， 圆 环 的 位 置 为 1， 然 后 在 焦点 和 圆 环 间 插 入 颜色 。 辐 射 渐变 
也 可 以 使 用 setspread() 函数 设置 渐变 区 域 以 外 的 区 域 的 扩散 方式 ， 三 种 扩散 方式 的 效果 如 下 
图 所 示 。 





PadSpread (default) ReflectSpread RepeatSpread 
三 、 锥 形 渐变 
1 接着 在 paintEvent() 函数 里 面 添加 如 下 代码 : 


// 锥 形 渐变 

QConicalGradient conicalGradient(QPointF(250, 190), 60); 
conicalGradient.setColorAt(0.2, Qt::cyan); 
conicalGradient.setColorAt(0.9, Qt::black); 
painter.setBrush(conicalGradient); 
painter.drawEllipse(QPointF(250, 190), 50, 50); 


运行 程序 ， 效 果 如 下 图 所 示 。 
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2: 介绍 


对 于 锥 形 渐变 QConicalGradient::QConicalGradient ( const QPointF & center,qreal angle ) 需 
要 指定 中 心 点 center 和 一 个 角度 angle (其 值 在 0 到 360 之 间 ) ， 然 后 沿 逆 时 针 从 给 定 的 角 
度 开始 环绕 中 心 点 插入 磊 色 。 这 里 给 定 的 角度 沿 逆 时 针 方 向 开始 的 位 置 为 0， 旋转 一 圈 后 为 
1。 setspread() 函数 对 于 锥 形 渐变 没有 效果 。 


本 节 在 前 面 的 基础 上 ， 简 单 介绍 了 一 下 常用 的 三 种 渐变 填充 。 如 果 大 家 可 以 熟练 使 用 这 几 种 
填充 效果 ， 那 么 就 可 以 实现 非常 漂亮 的 界面 。 另 外 ， 还 可 以 给 画笔 设置 渐变 颜色 ， 这 样 就 可 
以 绘制 出 特殊 效果 的 线条 和 文字 ， 这 个 可 以 参考 《Qt Creator 快 速 入 门 》 的 相关 内 容 。 


涉及 到 的 相关 源码 


第 13 篇 2D 绘 图 (三 ) 绘制 文字 


导语 


Qt 中 除了 绘制 图 形 以 外 ， 还 可 以 使 用 Qpainter::darwText() 函数 来 绘制 文字 ， 也 可 以 使 
用 QPainter::setFont() 设置 文字 所 使 用 的 字体 ， 使 用 QPainter::fontInfo() 函数 可 以 获取 字 
体 的 信息 ， 它 返回 QFontInfo 类 对 象 。 在 绘制 文字 时 会 默认 使 用 抗 锯齿 。 


环境 : Windows Xp + Qt 4.8.4+QtCreator 2.6.2 


我 们 接着 在 上 一 节 的 项 目 上 进行 讲解 ， 首 先 将 paintEvent() 有 函数 更 改 如 下 : 


void Mainwindow: :paintEvent (QPaintEvent *) 


{ 
QPainter painter(this); 
painter.drawText(100, 100, "qter.org_yafeilinux"); 


这 样 就 在 (166，166) 的 位 置 绘制 了 一 个 字符 串 。 效 果 如 下 图 所 示 。 
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二 、 控 制 文字 的 位 置 


1 我 们 先 到 QPainter 的 帮助 文档 页 面 ， 然 后 查看 drawText() 函数 的 重 载 形式 ， 找 到 : 
QPainter::drawText ( const QRectF &rectangle, int flags, const QString & text, QRectF * bo 


， 如 下 图 所 示 。 


void QPainter:drawText ( const QRectF & rectangle, int flags, const QString & 
text, QRectF * boundingRect = 0 ) 


This is an overloaded function 


Draws the given text within the provided rectangle 


er painter (this); 


Qtby 
painter.drawIext (rect, Qt::Align 


它 的 第 一 个 参数 指定 了 绘制 文字 所 在 的 矩形 ; 第 二 个 参数 指定 了 文字 在 矩形 中 的 对 齐 方 式 ， 
它 由 Qt::AlignmentFlag 枚 举 变量 进行 定义 8 不 同 对 齐 方 式 也 可 以 使 用 | 操作 符 同时 使 用 ， 这 


里 还 可 以 使 用 Qt::TextFlag 定义 的 其 他 一 些 标志 ， 比 如 自动 换行 等 ; 第 三 个 参数 就 是 所 要 绘 
制 的 文字 ， 这 里 可 以 使 用 \n 来 实现 换行 ; 第 四 个 参数 一 般 不 用 设置 。 


2 :下面 我 们 来 看 一 个 例子 。 为 了 更 明显 的 看 到 文字 在 指定 矩形 中 的 位 置 ， 我 们 绘制 出 这 个 天 
形 。 将 paintEvent() 函数 更 改 如 下 : 


第 13 篇 2D 绘 图 (三 ) 绘制 文字 


void MainwWindow: :paintEvent(QPaintEvent *) 


{ 

QPpanntem Dammten(ehs yy 

WX 

QRectF rect(20, 20, 300, 200); 

// 为 了 更 直观 地 看 到 字体 的 位 置 ， 我 们 绘制 出 这 个 矩形 

painter ,drawRect(rect ) ， 

painter ,setPen(QColor(Qt: :red)); 

// 我 们 这 里 先 让 字体 水 平 居中 

painter.drawText(rect, Qt::AlignHCenter, "yafeilinux"); 
} 


现在 运行 程序 ， 效 果 如 下 图 所 示 。 


| EER ES 
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可 用 的 对 齐 方式 如 下 图 所 示 。 


=m Qt-AlignLeft 

" Qt-AlignRight 

" Qt-AlignHCenter 

=" Qt-AlignJustify 

m Qt-AlignTop 

" Qt-AlignBottom 

ma Qt-AlignVCenter 

mm Qt-AlignCenter 

m QtTextDontClip 

m at:TextSingleLine 

m Qt:TextExpandTabs 

" _ Qt-TextShowMnemonic 
=m QtTextWordWrap 

m QtTextincludeTrailingSpaces 
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三 、 使 用 字体 


为 了 绘制 漂亮 的 文字 ， 可 以 使 用 QFont 类 来 设置 文字 字体 。 大 家 也 可 以 先 在 帮助 文档 中 查看 
该 类 的 介绍 。 下 面 将 最 常用 的 一 些 设置 进行 演示 。 


在 paintEvent() 函数 中 继续 添加 如 下 代码 : 


QFont font(" 宋 体 "，15, QFont::Bold, true); 
// 设 置 下 划 线 

font.setUnderline(true); 

// 设 置 上 划 线 

font.setoOverline(true); 

XX 设计 字 好 大小 己 
font.setcapitalization(QFont::SmallCaps); 


// 设 置 字符 间 的 间距 
font.setLetterSpacing(QFont::AbsoluteSpacing, 10); 
// 使 用 字体 


painter.setFont(font); 
painter.setPen(Qt::green); 
painter.drawText(120, 80, tr("yafeilinux")); 
painter.translate(50, 50); 
painter.rotate(90); 

painter.drawText(0, 0, tr("hellogqt")); 


这 里 创建 了 QFont 字体 对 象 ， 使 用 的 构造 函数 

为 QFont::QFont ( const QString & family,int pointSize = -1, int weight = -1, bool italic = 
， 第 一 个 参数 设置 字体 的 family 属性 ， 这 里 使 用 的 字体 族 为 宋体 ， 可 以 使 

用 QFontpatabase 类 来 获取 所 支持 的 所 有 字体 ; 第 二 个 参数 是 点 大 小 ， 默 认 大 小 为 12 ; 第 三 个 
参数 为 weight 属性 ， 这 里 使 用 了 粗 体 ; 最 后 一 个 属性 设置 是 否 使 用 斜体 。 然 后 我 们 又 使 用 了 

其 他 几 个 函数 来 设置 字体 的 格式 ， 最 后 调用 setFont() 函数 来 使 用 该 字体 ， 并 使 

用 drawText() 函数 的 另 一 种 重 载 形 式 在 点 (126，86) 绘制 了 文字 。 后 面 又 将 坐标 系统 平移 并 
旋转 ， 然 后 再 次 绘制 了 文字 。 运 行程 序 ， 效 果 如 下 图 所 示 。 
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这 一 节 最 后 的 例子 中 使 用 了 rotate() 函数 来 旋转 坐标 系统 ， 从 而 绘制 出 了 纵向 的 文字 。 
将 会 在 后 面 的 篇 章 中 介绍 到 。 


涉及 到 的 源码 下 载 


第 14 篇 2D 绘 图 (四 ) 绘制 路 径 


导语 


如 果 要 绘制 一 个 复杂 的 图 形 ， 尤 其 是 要 重复 绘制 这 样 的 图 形 ， 那 么 可 以 使 

用 Qpainterpath 类 ， 然 后 使 用 QPainter: :drawPath() 来 进行 绘制 。 Qpainterpath 类 为 绘制 操 
作 提 供 了 一 个 容器 ， 可 以 用 来 创建 图 形 并 且 重 复 使 用 。 一 个 绘图 路 径 就 是 由 多 个 和 矩形、 机 

圆 、 线 条 或 者 曲线 等 组 成 的 对 象 ， 一 个 路 径 可 以 是 封闭 的 ， 例 如 短 形 和 椭圆 ; 也 可 以 是 非 封 
闭 的 ， 例 如 线条 和 曲线 。 


环境 : Windows Xp + Qt 4.8.4+QtCreator 2.6.2 


目 系 


e 一 、 简 单 的 使 用 路 径 
。 二 、 复 制图 形 
ee 三、 绘制 图形 时 的 当前 位 置 


是 
一 、 简 单 的 使 用 路 径 


依然 在 前 面 的 项 目 中 进行 讲解 。 更 改 paintEvent() 有 函数 如 下 : 


void Mainwindow: :paintEvent(QPaintEvent *) 
{ 
QPainterPath path; 
path.addEllipse(100, 100, 50, 50); 
path.1lineTo(200, 200); 
QPainmter paznter (thLs) 
painter.setPen(Qt::blue); 
painter.setBrush(Qt::red); 
painter.drawPath(path); 


当 创 建 一 个 Qpainterpath 对 象 后 ， 可 以 使 
用 lineTo() 、 arcTo() 、 cubicTo() 和 quadTo() 等 函数 将 直线 或 者 曲线 添加 到 路 径 中 。 运 
行程 序 ， 效 果 如 下 图 所 示 。 
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二 、 复 制图 形 


如 果 只 是 简单 的 将 几 个 图 形 拼接 在 一 起 ， 其 实 完全 没有 必要 用 路 径 ， 之 所 以 要 引入 路 径 ， 就 
是 因为 它 的 一 个 非常 有 用 的 功能 : 复制 图 形 路 径 。 我 们 在 painEvent() 函数 中 继续 添加 下 面 几 
行 代码 : 

QPainterpath path2; 

path2.addPath(path); 


path2.translate(100,0); 
painter.drawPath(path2); 


现在 运行 程序 ， 效 果 如 下 图 所 示 。 
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可 以 看 到 ， 对 于 已 经 绘制 好 的 路 径 ， 可 以 非常 简单 的 进行 重复 绘制 。 


三 、 绘 制图 形 时 的 当前 位 置 
1: 我 们 先 来 看 个 例子 ， 将 paintEvent() 函数 更 改 如 下 : 


void Mainwindow: :paintEvent(QPaintEvent *) 


{ 
QPainterPath path; 
path.1lineTo(100, 100); 
path.1lineTo(200,100); 
QPainter painter (thnrs), 
painter.drawPath(path); 
} 


程序 运行 效果 如 下 图 所 示 。 
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可 以 看 到 ， 创 建 路 径 后 ， 黑 认 是 从 (6，6) 点 开始 绘制 的 ， 当 绘制 完 第 一 条 直线 后 当前 位 置 
是 (166，166) 点 ， 从 这 里 开始 绘制 第 二 条 直线 。 绘 制 完 第 二 条 直线 后 ， 当 前 位 置 


二 (209,190) 。 


2 再 来 看 一 个 例子 。 将 paintEvent() 函数 的 内 容 更 改 如 下 : 


void Mainwindow: :paintEVvVent(QPaintEVent *) 


{ 
QPainterPath path; 
path.addRect(50, 50, 40, 40); 
path.1lineTo(200, 200); 
QPaznmter paznter (ens 
painter.drawPath(path); 

} 


运行 程序 ， 效 果 如 下 图 所 示 。 


用 下 二 im 丰 imdo 豆 辐 回 因 





可 以 发 现 ， 当 绘制 完 矩 形 后 ， 当 前 位 置 在 矩形 的 左上 角 顶 点 ， 然 后 从 这 里 开始 绘制 后 面 的 直 


4 我 们 也 可 以 使 用 moveTo() 函数 来 改变 当前 点 的 位 置 。 例 如 将 上 面 的 代码 更 改 为 : 


void Mainwindow: :paintEvent(QPaintEvent *) 
{ 
QPainterpPath path; 
path.addRect(50, 50, 40, 40); 
// 移 动 到 (100，100) 点 
path.moveTo(100, 100); 
path.1lineTo(200, 200); 
QPainter paanter (Enys)s 
painter.drawPath(path); 


样 当 绘制 完 矩 形 以 后 ， 就 会 移动 到 (1006，160) 点 进行 后 面 的 绘制 。 程 序 运 行 效 果 如 下 图 所 


oo 


引信 


第 14 篇 2D 绘 图 (四 ) 绘制 路 径 
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这 里 只 讲解 了 Qpainterpath 最 基本 的 应 用 ， 使 用 好 这 个 类 可 以 绘制 出 很 多 特效 图 形 。 如 果 绘 
制 的 两 个 图 形 有 交集 ， 那 么 还 要 涉及 到 相交 部 分 的 填充 规则 问题 ， 这 部 分 内 容 可 以 参考 《Qt 
Creator 快 速 入 门 》 第 10 章 的 相关 内 容 。 


涉及 到 的 源码 下 载 
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第 15 篇 2D 绘 图 (五 ) 绘制 图 片 


导语 


Qt 提供 了 四 个 类 来 处 理 图 像 数据 : QImage 、 QPixmap 、 QBitmap 和 Qpicture ， 它 们 也 都 是 
常用 的 绘图 设备 。 其 中 QImage 主要 用 来 进行 MO 处 理 ， 它 对 WO 处 理 操作 进行 了 优化 ， 而 且 也 
可 以 用 来 直接 访问 和 操作 像素 ; QPixmap 主要 用 来 在 屏幕 上 显示 图 像 ， 它 对 在 屏幕 上 显示 图 
像 进 行 了 优化 ， QBitmap 是 QPixmap 的 子 类 ， 它 是 一 个 便捷 类 ， 用 来 处 理 闫 色 深 度 为 1 的 图 
像 ， 即 只 能 显示 黑白 两 种 颜色 ; Qpicture 用 来 记录 并 重演 Qpainter 命令 。 这 一 节 我 们 只 讲 
解 QPixmap “ 


环境 : Windows Xp + Qt 4.8.4+QtCreator 2.6.2 


目 系 


。 一 、 简 单 绘制 图 片 
。 二 、 平 移 图 片 
e@ 三、 缩放 图 片 
e。 四 、 旋 转 图 片 
e 五、 扭曲 图 片 


正文 
一 、 简 单 绘制 图 片 


1: 这 次 我 们 重新 创建 一 个 Qt Gui 应 用 ， 项 目 名 称 为 painter 2 ， 在 类 信息 页 面 ， 将 基 类 更 改 
为 QDpialog ， 类 名 使 用 默认 的 Dialog 即 可 。 


2 . 然后 在 源码 目录 中 复制 一 张 图 片 ， 比 如 这 里 是 一 张 背景 透明 的 logo.png 图 片 ， 如 下 图 所 
未 -6 


C++ h ui C++ 


dialog dialog dialog maln 
D 
pro Vier 
painter_2 painter 2.pro.user Jogo 


3 在 dialog.h 文件 中 添加 重 绘 事件 处 理 函 数 的 声明 : 


protected: 
void paintEvent(QPaintEvent *),; 


4 到 dialog.cpp 文件 中 先 添加 头 文件 包含 #include <QPainter> ， 然 后 添加 函数 的 定义 : 


void Dialog::paintEvent(QPaintEvent *) 


{ 
QPainter pazmnter(thys)s 
QPixmap pix; 
pix.load("../painter_2/l10go.png"); 
painter.drawPixmap(0, 0, 129, 66, pix); 
} 


这 里 使 用 了 相对 路 径 ， 因 为 Qt Creator 默 认 是 使 用 影子 构建 ， 即 编译 生成 的 文件 

在 painter_ 2-build-desktop-Debug 这 样 的 目录 里 面 ， 而 这 个 目录 就 是 当前 目录 ， 所 以 源码 目录 
就 是 其 上 级 目录 了 。 大 家 可 以 根据 自己 的 实际 情况 来 更 改 路 径 ， 也 可 以 使 用 绝对 路 径 ， 不 过 
最 好 使 用 资源 文件 来 存放 图 片 。 drawPixmap() 逻 数 在 给 定 的 矩形 中 来 绘制 图 片 ， 这 里 矩形 的 
左上 角 顶 点 为 (6, 6) 点 ， 宽 129， 高 66， 如 果 这 个 跟 图 片 的 大 小 不 相同 ， 默 认 会 拉 伸 图 片 。 
运行 效果 如 下 图 所 示 。 


回国 





(注意 : 下 面 的 操作 涉及 到 了 坐标 系统 ， 这 里 不 再 详细 讲解 ， 大 家 先进 行 操作 查看 效果 ， 具 
体 的 坐标 内 容 将 在 下 一 节 讲 解 。) 


二 、 平 移 图 片 


QPainter 类 中 的 translate() 子 数 实现 坐标 原点 的 改变 ， 改 变 原点 后 ， 此 点 将 会 成 为 新 的 原 
点 (9, 90) 。 下 面 来 看 一 个 例子 。 


在 paintEvent() 浆 数 里 面 继续 添加 如 下 代码 : 


painter.translate(1009，100); // 将 (100，100) 设 为 坐标 原点 
painter.drawPixmap(0, 90, 129, 66, pix); 


运行 程序 ， 效 果 如 下 图 所 示 。 


| 区 区 | 





这 里 将 (160，166) 设置 为 了 新 的 坐标 原点 ， 所 以 下 面 在 (6;0) 点 贴图 ， 就 相当 于 在 以 前 
的 (100,;100) 点 贴图 。 


三 、 缩 放 图 片 
我 们 可 以 使 用 Qpixmap 类 中 的 scaled() 函数 来 实现 图 片 的 放大 和 缩小 。 


在 paintEvent() 函数 中 继续 添加 代码 : 


qreal width = pix.width(); // 获 得 以 前 图 片 的 宽 和 高 

qreal height = pix.height(); 

// 将 图 片 的 宽 和 高 都 扩大 两 倍 ， 并 且 在 给 定 的 给 形 内 保持 宽 高 的 比值 不 变 
pix = pix.scaled(width*2, height*2, Qt::KeepAspectRatio); 
painter.drawPixmap(70, 70,pix); 


其 中 参数 Qt::keepAspectRatio ， 是 图 片 缩放 的 方式 。 我 们 可 以 查看 其 帮助 。 将 和 鼠标 指针 放 到 
该 代码 上 ， 当 出 现 F1 提 示 时 ， 按 下 F1 键 ， 这 时 就 可 以 查看 其 帮助 了 。 当 然 我 们 也 可 以 直接 在 
帮助 里 查找 该 关键 字 。 如 下 图 所 示 。 


Scales the pixmap to the given size, using the aspect ratio and transformation modes spe 
transformMode. 


ma 


me 


IlgnoreAspectRatio KeepAspectRatio KeepAspectRatioByExpanding 





这 里 有 三 个 值 ， 只 看 其 图 片 就 可 大 致 明白 ， Qt::IgnoreAspectRatio 是 不 保持 图 片 的 宽 高 

比 ，Qt::KeepAspectRatio 是 在 给 定 的 矩形 中 保持 宽 高 比 ， 最 后 一 个 也 是 保持 宽 高 比 ， 但 可 能 
超出 给 定 的 矩形 。 这 里 给 定 的 矩形 是 由 我 们 显示 图 片 时 给 定 的 参数 决定 的 ， 例 

如 painter.drawPixmap(9,9,199,100,pix); 就 是 在 以 (6,;0) 点 为 起 始点 的 宽 和 高 都 是 100 的 天 


中 。 


Ke 


运行 程序 效果 如 下 图 所 示 。 


第 15 篇 2D 绘 图 (五 ) 绘制 图 片 


上 Dialog 


Qter 


Qter 


Qter 


旋转 使 用 的 是 QPainter 类 的 rotate() 函数 ， 它 默认 是 以 原点 为 中 心 进行 旋转 的 。 我 们 要 改 
变 旋 转 的 中 心 ， 可 以 使 用 前 面 讲 到 的 translate() 函数 完成 。 





四 、 旋 转 图 片 


在 paintEvent() 函数 中 继续 添加 如 下 代码 : 


painter .translate(64，33); // 让 图 片 的 中 心 作为 旋转 的 中 心 
painter.rotate(90); // 顺 时 针 旋 转 90 度 
painter.translate(-64,-33); // 使 原点 复原 
painter.drawPixmap(100, 100, 129, 66, pix); 


这 里 必须 先 改变 旋转 中 心 ， 然 后 再 旋转 ， 然 后 再 将 原点 复原 ， 才 能 达到 想 要 的 效果 。 运行 程 
序 ， 效 果 如 图 所 示 。 
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五 、 扭 曲 图 片 


实现 图 片 的 扭曲 ， 是 使 用 的 Qpainter 类 的 shear(qreal sh; qreal sv) 函数 完成 的 。 它 有 两 个 
参数 ， 前 面 的 参数 实现 横行 变形 ， 后 面 的 参数 实现 纵向 变形 。 当 它们 的 值 为 0 时 ， 表 示 不 捍 
曲 。 


在 paintEvent() 中 继续 添加 如 下 代码 : 


painter.shear(0.5，0); // 横 向 扭曲 
painter.drawPixmap(100, 0, 129, 66, pix); 


运行 效果 如 下 图 所 示 。 


ll Dialog 


ter 


开源 社区 


Qter 





-车 
注 


这 一 节 讲解 了 Qpixmap 类 的 简单 应 用 。 对 于 后 面 讲 到 的 图 片 变形 的 应 用 ， 细 心 的 读者 可 
能 已 经 发 现 了 ， 旋 转 了 坐标 系统 以 后 再 绘制 图 片 都 是 纵向 的 ， 这 就 是 因为 旋转 了 坐标 系统 而 
没有 进行 恢复 造成 的 。 具 体 的 坐标 操作 我 们 会 在 下 一 节 讲 解 。 


进 
如 果 大 家 还 想 系 统 的 学 习 其 他 绘图 类 的 应 用 ， 可 以 参考 《Qt Creator 快 速 入 门 》 第 10 章 的 相关 
内 


第 16 篇 2D 绘 图 (六 ) 坐标 系统 


导语 


前 面 一 节 我 们 讲解 了 图 片 的 显示 ， 其 中 很 多 地 方 都 用 到 了 坐标 的 变化 。 这 一 节 我 们 将 讲解 Qt 
的 坐标 系统 ， 分 为 两 部 分 来 讲解 : 第 一 部 个 主要 讲解 前 面 一 节 的 那 几 个 函数 ， 它 们 分 别 

是 translate() 平移 变换 、 scale() 比例 变换 、 rotate() 旋转 变换 、 shear() 扭曲 变换 。 最 
后 还 会 介绍 两 个 有 用 的 函数 save() 和 restore() ， 利 用 它们 来 保存 和 弹出 坐标 系 的 状态 ， 从 
而 实现 快速 利用 几 个 变换 函数 来 绘图 。 


第 二 部 分 会 和 大 家 一 起 来 研究 一 下 Qt 的 坐标 系统 ， 其 中 可 能 会 涉及 到 多 个 坐标 ， 大 家 一 定 要 
亲自 动手 操作 感悟 一 下 ， 不 然 很 难 理解 的 |! 


环境 : Windows Xp + Qt 4.8.4+Qt Creator2.6.2 


目录 


。 第 一 部 分 Qt 坐标 系统 应 用 
o 一 、 坐 标 系统 简介 
o 二 、 坐 标 系统 变换 
三 、 坐 标 系统 的 保存 
e@ 第 二 部 分 坐标 系统 深入 研究 
o 一 、 获 得 坐标 信息 
o 二 、 研 究 变换 后 的 坐标 系统 
o 三 、 研 究 绘图 设备 的 坐标 系统 


正 丈 
第 一 部 分 Qt 坐标 系统 应 用 
一 、 坐 标 系统 简介 


ee 系统 ， 默 认 的 ， 左上 角 为 坐标 原点 ， 水 平 向 右 依 次 增 大 ， 
水 平 向 左 依次 减 小 ， 垂 直 向 下 依次 增 大 ， 重 直 ee 。 原 点 即 为 (6,0) 点 ， 以 像素 
为 单位 增 减 。 


下 面 仍 然 在 上 一 节 的 程序 中 进 芭 演 示 ， 更 改 paintEvent() 的 内 容 如 下 : 


void Dialog::paintEvent(QPaintEvent *) 


{ 
QPainter pazmter (thysy) 
painter.setBrush(Qt::red); 
painter.drawRect(0, 0, 100, 100); 
painter.setBrush(Qt::yellow); 
painter .drawRect(-50, -50, 100, 100); 
} 


我 们 先 在 原点 (9,6) 绘制 了 一 个 长 宽 都 是 100 像 素 的 红色 矩形 ， 又 在 (-50， -50) 点 绘制 了 
一 个 同样 大 小 的 黄 色 和 矩形 。 可 以 看 到 ， 我 们 只 能 看 到 黄 色 拢 形 的 四 分 之 一 部 分 。 运 行程 序 ， 
效果 如 下 图 所 示 。 





二 、 坐 标 系统 变换 


默认 的 ，Qpainter 在 相关 设备 的 坐标 系统 上 进行 绘制 ， 在 进行 绘图 时 ， 可 以 使 

用 QPainter::scale() 鸥 数 缩放 坐标 系统 ; 使 用 QPainter: :rotate() 函数 顺 时 针 旋 转 坐 标 系 
统 ; 使 用 Qpainter::translate() 函数 平移 坐标 系统 ; 还 可 以 使 用 Qpainter::shear() 围绕 原点 
来 扭曲 坐标 系统 。 如 下 图 所 示 。 


scalel() translate() 


回回 回民 


坐标 系统 的 2D 变 换 由 类 实现 ， 我 们 可 以 使 用 前 面 提 到 的 那些 便捷 函数 进行 坐标 系 
统 变 换 ， 当 然 也 可 以 通过 QTransform 类 实现 。 





1 平移 变换 。 将 paintEvent() 函数 内 容 更 改 如 下 : 


void Dialog::paintEvent(QPaintEvent *) 
{ , 
// 平移 变换 
QPainter painter(this); 
painter.setBrush(Qt::yellow); 
painter .drawRect(0, 0, 50, 50); 
painter.translate(100，100); // 将 点 (100，1400) 设 为 原点 
painter.setBrush(Qt::red); 
painter.drawRect(0, 0, 50, 50); 
painter.translate(-100, -100); 
painter.drawLine(0, 0, 20, 20); 


运行 程序 ， 效 果 如 下 图 所 示 。 


有 Dialoz 





这 里 先 在 原点 (90，6) 绘制 了 一 个 宽 、 高 均 为 50 的 正方 形 ， 然 后 使 用 translate() 函数 将 坐标 
系统 进行 了 平移 ， 使 (166，166) 点 成 为 了 新 原点 ， 所 以 我 们 再 次 进行 绘制 的 时 候 ， 虽 
然 drawRect() 中 的 逻辑 坐标 还 是 (6，6) 点 ， 但 实际 显示 出 来 的 却 是 在 (100，166) 点 的 红色 
正方 形 。 可 以 再 次 使 用 translate() 函数 进行 反 向 平移 ， 使 原点 重新 回 到 窗口 左上 角 。 


2 缩放 变换 。 将 paintEvent() 函数 中 的 内 容 更 改 如 下 : 


void Dialog::paintEvent(QPaintEvent *) 


{ 
// 缩放 
QPainter painter(this); 
painter.setBrush(Qt::yellow); 
painter.drawRect(0, 0, 100, 100); 
painter.scale(2，2); // 放 大 两 倍 
painter.setBrush(Qt::red); 
painter .drawRect(50, 50, 50, 50); 
} 


运行 程序 ， 效 果 如 下 图 所 示 。 














有 Dialog 





可 以 看 到 ， 当 我 们 使 用 scale() 函数 将 坐标 系统 的 横 、 纵 坐标 都 放大 两 倍 以 后 ， 逮 辑 上 
的 (50， 50) 点 变 成 了 窗口 上 的 (166，169) 点 ， 而 逻辑 上 的 长 度 50， 绘 制 到 窗口 上 的 长 度 
却 是 100。 


3 . 扭曲 变换 。 将 paintEvent() 函数 更 改 如 下 : 


void Dialog::paintEvent(QPaintEvent *) 


{ 
// 捏 曲 
QPainter painter(this); 
painter.setBrush(Qt::yellow); 
painter.drawRect(0, 0, 50, 50); 
painter.shear(9，1); // 纵 向 扭曲 变形 
painter.setBrush(Qt::red); 
painter.drawRect(50, 0, 50, 50); 
} 


运行 程序 ， 效 果 如 下 图 所 示 。 


shear() 有 两 个 参数 ， 第 一 个 是 对 横向 进行 扭曲 ， 第 二 个 是 对 纵向 进行 扭曲 ， 而 取 值 就 是 捏 
曲 的 程度 。 比 如 程序 中 对 纵向 扭曲 值 为 1， 那 么 就 是 红色 正方 形 堪 边 的 边 下 移 一 个 单位 ， 右 边 
的 边 下 移 两 个 单位 ， 值 为 1 就 表明 右边 的 边 比 左边 的 边 多 下 移 一 个 单位 。 大 家 可 以 更 改 取 值 ， 
测试 效果 。 


4 旋转 变换 。 将 paintEvent() 函数 更 改 如 下 : 


void Dialog::paintEvent(QPaintEvent *) 


{ 


// 旋转 


QPainter ‘painter (thrs),; 


painter. 
painter. 
painter. 
painter. 
painter. 
painter. 


drawLine(0, 0, 100, 0); 


rotate(30); // 以 原点 为 中 心 ， 


drawLine(0, 0, 100, 0); 
translate(100, 100); 
rotate(30); 

drawLine(0, 0, 100, 0); 


运行 程序 ， 效 果 如 下 图 所 示 。 





顺 时 针 旋 转 39 度 
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这 里 先 绘制 了 一 条 水 平 的 直线 ， 然 后 将 坐标 系统 旋转 了 30 度 ， 又 绘制 了 一 条 直线 。 可 以 看 

到 ， 默 认 是 以 原点 (0，0) 为 中 心 旋转 的 。 如 果 想 改变 旋转 中 心 ， 可 以 使 用 translate() 函 
数 ， 比 如 这 里 将 中 心 移动 到 了 (1609，160) 点 ， 然 后 旋转 了 30 度 ， 又 绘制 了 一 条 直线 。 我 们 的 
本 意 是 想 在 新 的 原点 从 水 平方 向 旋转 30 度 进行 绘制 ， 可 是 实际 效果 却 超过 了 30 度 。 这 是 由 于 
前 面 已 经 使 用 rotate() 函数 旋转 过 坐标 系统 了 ， 后 面 的 旋转 会 在 前 面 的 基础 上 进行 。 


下 面 我 们 再 次 更 改 paintEvent() 函数 : 


void Dialog::paintEvent(QPaintEvent *) 


{ 


// 旋转 


QPainter painter (this),; 
painter.drawLine(0, 0, 100, 0); 


painter. 


painter.drawLine(0, 0, 100, 0); 
painter.rotate(-30); // 反 向 旋转 
painter.translate(100, 100); 
painter.rotate(30); 
painter.drawLine(0, 0, 100, 0); 


运行 程序 ， 效 果 如 下 图 所 示 。 


rotate(30); // 以 原点 为 中 心 ， 顺 时 针 旋转 39 度 


有 Dialog 


J 





这 次 我 们 在 移动 原点 以 前 先 将 坐标 系统 反 向 旋转 ， 可 以 看 到 ， 第 二 次 旋转 也 是 从 水 平方 向 开 
始 的 。 


其 实 ， 前 面 讲 到 的 这 几 个 变换 函数 都 是 如 此 ， 他 们 改变 了 坐标 系统 以 后 ， 如 果 不 进行 逆向 操 
作 ， 坐 标 系 统 是 无 法 自动 复原 的 。 针 对 这 个 问题 ， 下 面 我 们 将 讲解 两 个 非常 实用 的 函数 来 实 
现 坐 标 系统 的 保存 和 还 原 。 


三 、 坐 标 系统 的 保存 


我 们 可 以 先 利 用 save() 函数 来 保存 坐标 系 现在 的 状态 ， 然 后 进行 变换 操作 ， 操 作 完 之 后 ， 再 
用 restore() 函数 将 以 前 的 坐标 系 状 态 恢 复 ， 其 实 就 是 一 个 入 栈 和 出 栈 的 操作 。 下 面 来 看 一 
个 具体 的 例子 ， 更 改 paintEvent() 部 数 如 下 : 


void Dialog::paintEvent(QPaintEvent *) 

{ 
QPainter pannter(thas), 
painter.save(); // 保 存 坐标 系 状 态 
painter.translate(100,100); 
painter.drawLine(0, 90, 50, 50); 
painter.restore(); // 恢 复 以 前 的 坐标 系 状态 
painter.drawLine(0, 90, 50, 50); 


运行 程序 ， 效 果 如 下 图 所 示 。 利 用 好 这 两 个 函数 ， 可 以 实现 坐标 系 快速 切换 ， 绘 制 出 不 同 的 
图 形 。 


A 


第 二 部 分 坐标 系统 深入 研究 

在 第 一 部 分 ， 我 们 主要 学 习 了 常用 的 一 些 坐 标 变换 ， 虽 然 在 编程 中 ， 这 些 变换 已 经 可 以 满足 
大 部 分 的 应 用 需求 。 不 过 ， 大 家 是 否 也 感觉 到 现在 对 坐标 的 变换 依然 很 模糊 ， 没 有 一 个 透彻 
的 认识 。 下 面 咱们 就 一 点 一 点 来 研究 一 下 坐标 系统 的 变换 。 


前 面 图 形 的 变换 都 是 我 们 眼睛 看 到 的 ， 为 了 更 具有 说 服 力 ， 下 面 将 获取 具体 的 坐标 数据 ， 通 
过 参考 数据 来 进一步 了 解 坐标 变换 。 


1 首先 在 dialog.h 文件 中 添加 头 文件 包含 : 


#include <QMouseEvent> 


然后 添加 一 个 protected 鼠标 事件 处 理 函 数 声明 : 


void mousePressEvent(QMouseEvent *)， 


2 到 dialog.cpp 文件 中 ， 先 添加 头 文件 包含 : 
#include <QDebug> 
然后 添加 函数 定义 : 


void Dialog: :mousePressEvent(QMouseEvent *event ) 


{ 
} 


dqDebug() << event->pos(); 


这 里 应 用 了 qpebug() 骂 数 ， 该 函数 可 以 在 程序 运行 时 将 程序 中 的 一 些 信息 输出 到 控制 面板 ， 
在 QtCreator 中 会 将 信息 输出 到 其 下 面 的 “应 用 程序 输出 "窗口 。 这 个 函数 很 有 用 ， 在 进行 简单 
的 程序 调试 时 ， 都 可 以 利用 该 函数 进行 。 我 们 这 里 利用 它 将 自 标 指针 的 坐标 值 输出 出 来 。 


3 将 paintEvent() 函数 更 改 如 下 : 


void Dialog::paintEvent(QPaintEvent *) 


{ 
QPainter painter(this); 
painter.drawRect(0, 0, 50, 50); 


现在 运行 程序 ， 然 后 将 鼠标 在 绘制 的 正方 形 右 下 角 顶 点 处 点 击 ， 在 QtCreator 的 应 用 程序 输出 
窗口 就 会 输出 相应 点 的 坐标 信息 。 如 下 图 所 示 。 大 家 也 可 以 点 击 一 下 其 他 的 地 方 ， 查 看 输出 


信息 。 
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painter 2 国 








E:\painter 2-build-desktop-Debug\debug\painter 2.63 
QPoint (50,50) 


二 、 研 究 变 换 后 的 坐标 系统 
1 首先 研究 放大 后 的 坐标 系统 ， 将 paintEvent() 函数 更 改 如 下 : 


void Dialog::paintEvent(QPaintEvent *) 


{ 
// 放大 
QPainter pazmnter (thys) 
painter.drawRect(0, 0, 50, 50); 
painter.scale(1, 2); 
painter.drawRect(50, 50, 50, 50); 
} 


这 里 ， 我 们 将 纵 坐 标 放大 了 两 倍 ， 而 横 坐 标 没有 改变 。 运 行程 序 ， 效 果 如 下 图 所 示 。 
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大 家 可 以 查看 一 下 第 二 个 矩形 的 各 个 顶点 的 坐标 ， 左 上 角 是 (56，166) 也 就 是 说 纵 坐 标 扩 大 
了 两 倍 ， 查 看 其 它 点 ， 会 发 现 左 右 两 条 边 长 都 变 成 了 100。 


2 研究 旋转 后 的 坐标 系统 。 修 改 paintEvent() 函数 如 下 : 


void Dialog::paintEvent(QPaintEvent *) 
{ 
QPainter painter(this); 
painter.drawLine(0, 0, 100, 0); 
painter.rotate(45); 
painter.setPen(Qt::red); 
painter.drawLine(0, 0, 100, 0); 


这 里 我 们 先 绘制 了 一 条 水 平 的 直线 ， 然 后 将 坐标 系统 旋转 45 度 ， 再 次 绘制 了 一 条 相同 的 红色 
直线 。 运 行程 序 ， 效 果 如 下 图 所 示 。 





大 家 可 以 查看 一 下 各 处 的 坐标 ， 虽 然 旋 转 后 直线 位 置 发 生 了 变化 ， 但 是 坐标 其 实 是 没有 变化 
的 。 我 们 也 可 以 利用 这 种 方法 来 测试 一 下 应 用 其 他 变换 函数 后 坐标 的 变化 ， 这 里 就 不 再 教 


三 、 研 究 绘 图 设备 的 坐标 系统 


余 了 可 以 在 QWidget 等 窗口 部 件 上 进行 以外， 还 可 以 在 QPixmap 、 QImage 等 上 面 进行 绘 
这 些 均 称 为 绘图 设备 。 en 来 研究 一 下 它 的 坐标 系统 。 


1 首先 更 改 paintEvent() 函数 如 下 : 


void Dialog::paintEvent(QPaintEvent *) 


{ 
QPainter painter(this); 
QPixmap pix(200, 200); 
pix. fil1(Qt: :red); // 背 景 填充 为 红色 
painter.drawPixmap(0, 0, 站 


在 前 面 我 们 已 经 讲 过 ， Qpixmap 可 以 用 来 显示 图 片 。 其 实 Qpixmap 本 身 就 是 一 个 绘图 设备 ， 
可 以 在 它 上 面 直接 绘图 。 这 这 里 先生 成 了 一 个 宽 和 高 都 是 200 像 素 的 QPixmap (注意 ， 必 
须 在 构建 时 指定 其 大 小 ) ， 然 后 为 其 填充 了 红色 ， ee 口 的 原点 进行 了 绘制 。 为 了 表述 
方面 ， 下 面 将 Qpixmap 对 象 称 为 画布 ， 这 里 就 是 先 绘制 了 一 个 红色 画布 。 


我 们 运行 程序 ， 并 在 红色 画布 的 左上 角 和 右 下 角 分 别 点 击 ， 查 看 输出 的 坐标 。 如 下 图 所 示 。 
因为 点 击 位 置 的 误差 ， 所 以 两 个 点 可 能 不 是 顶点 。 





E:\painter 2-build-desktop-Debug\debug\painter 2.e: 
QPoint (1,2) 


QPoint (198,198) 


2 下 面 我 们 接着 更 改 paintEvent() 的 代码 : 


void Dialog::paintEvent(QPaintEvent *) 


{ 
QPainter painter(this); 
QPixmap pix(200, 200); 
pix.fill(Qt::red); / /1 E 
painter.drawPixmap(100, 100, 0 
} 


这 次 我 们 在 (166，166) 点 重新 绘制 了 画布 ， 现 在 运行 程序 ， 发 现 画布 左上 角 坐 标 确实 
为 (160,100) ， 这 个 就 是 我 们 窗口 中 的 坐标 ， 是 没有 什么 疑问 的 。 效 果 如 下 图 所 示 。 





窗口 和 画布 都 是 绘图 设备 ， 那 么 画布 本 身 有 没有 自己 的 坐标 系统 呢 ? 我们 接着 研究 


3: 我 们 继续 更 改 paintEvent() 函数 : 


void Dialog::paintEvent(QPaintEvent *) 
{ 
QPainter painter(this); 
QPixmap pix(200, 200); 
pe es: Vy 
QPalinter ly 


nr pr (epix); 


pp. ee I 50, Eo 
painter ， drawpixmap(100, 100, pix); 


这 里 我 们 为 画布 pix 创建 了 一 个 QPainter 对 象 pp ， 注 意 这 个 pp 只 能 在 画布 上 绘 
我 们 在 画布 上 绘制 了 一 条 从 原点 (6，8) 开始 的 直线 。 运 行程 序 ， 效 果 如 下 图 所 示 。 


画 ， 然 后 


有 Dialog 





可 以 看 到 ， 直 线 是 从 画布 的 左上 角 开 始 绘制 的 ， 也 就 是 说 ， 画 布 也 有 自己 的 坐标 系统 ， 坐 标 
原点 在 画布 的 左上 角 。 


下 面 补充 说 明 一 下 : Qpainter painter(this) ， this 就 表明 了 是 在 窗口 上 进行 绘图 ， 所 以 利 
用 painter 进行 的 绘图 都 是 在 窗口 部 件 上 的 ， ee 进行 的 坐标 变换 ， 是 变化 的 窗口 的 坐 
标 系 ; 而 利用 pp 进行 的 绘图 都 是 在 画布 上 进 如 果 它 进行 坐标 变化 ， 就 是 变化 的 画布 的 
坐标 系 。 


通过 坐标 数值 ， 我 们 可 以 得 出 下 面 两 条 结论 : 


第 一 ，Qwidget 和 Qpixmap 各 有 一 套 坐 标 系统 ， 它 们 互 不 影响 。 可 以 看 到 ， 无 论 画 布 在 窗口 
的 什么 位 置 ， 它 的 坐标 原点 依然 在 左上 角 ， 为 (9,6) 点 ， 没 有 变 。 


第 二 ， 我 们 所 得 到 的 鼠标 指针 的 坐标 值 是 窗口 坐标 系统 的 ， 不 是 画布 的 坐标 。 
4 :下面 这 个 例子 将 对 比分 析 扩 大 窗口 坐标 或 画布 坐标 的 异同 。 


首先 将 paintEvent() 函数 更 改 如 下 : 


void Dialog::paintEvent(QPaintEvent *) 


{ 
QPainter painter(this)y 
ee pi 0 ep 


Goto << pix. Se 
pix.fill(Qt::red); 
es pF pe 

pp， .scale(2， 2 

pp. drawLine(g， 9， 50, 50) 


Gel << pix. ne 
painter.drawPixmap(0, 0, pix); 


这 里 我 们 将 画布 坐标 系统 放大 了 两 倍 ， 然 后 从 原点 开始 绘制 了 一 条 直线 ， 并 分 别 输出 了 画布 
放大 前 后 的 大 小 。 运 和 所 程序 ， 效果 如 下 图 所 示 。 





Th 
painter_2 加 | 


E:\painter 2-build-desktop-Debug\debug\painter 2.e: 
QSize (200, 200) 


下 面 再 次 更 改 paintEvent() 函数 : 


void Dialog::paintEvent(QPaintEvent *) 
{ 
QPainter painter( this); 
QPixmap pix(200,200); 
qDebug() 3 pix.size(); 
// 窗 口 坐标 扩大 2 倍 
painter ， 
pix.fill(Qt::red); 
QPainter pp(&pix); 
pp.drawLine(0, 0, 50, 50); 
qDebug() << pix.size(); 
painter.drawPixmap(0, 0, pix); 


这 里 与 前 面 唯一 的 不 同 是 : 这 里 放大 了 窗口 的 坐标 系统 ， 而 前 面 放 大 的 是 画布 的 坐标 系统 。 
运行 程序 ， 效 果 如 下 图 所 示 。 





Rsizel200，200) 
QSize (200, 200) 
QPoint (100, 99) 


可 以 看 到 ， 整 个 画布 的 可 见面 积 变 大 了 。 直 线 虽然 长 度 依然 是 100， 但 是 这 次 的 效果 跟前 面 明 
显 不 同 ， 因 为 是 窗口 坐标 变 大 ， 所 以 在 上 面 绘 出 的 线条 有 了 明显 的 颗粒 感 。 


上 面 两 个 程序 虽然 最 终 输 出 的 数据 是 一 样 的 ， 但 实际 效果 还 是 有 很 大 不 同 的 。 大 家 可 以 根据 
需要 进行 选择 性 应 用 。 

结语 

在 这 一 节 中 我 们 讲述 了 坐标 相关 的 多 个 知识 点 ， 经 过 本 节 的 学 习 ， 大 家 应 该 已 经 对 Qt 的 2D 绘 
图 有 了 一 个 浅显 的 认识 ， 下 一 节 我 们 将 做 一 个 比较 实用 的 涂鸦 板 例 子 。 


Qt 的 坐标 系统 是 很 有 必要 好 好 研究 的 ， 它 对 深入 学 习 应 用 Qt 绘图 很 有 帮助 。 如 果 大 家 想 更 系 
统 的 学 习 Qt 坐 标 系统 ， 可 以 参考 《Qt Creator 快 速 入 门 》 的 第 10 章 相关 内 容 。 


涉及 到 的 源码 : 


e painter 2 1.zip 
e painter 2 2.zip 
e painter 2 3.zip 
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第 17 篇 2D 绘 图 (七 ) 涂鸦 板 


导语 


通过 前 面 几 节 的 学 习 ， tn 的 认识 ， 这 一 节 我 们 将 应 用 前 面 
讲 到 的 内 容 ， 编 写 一 个 简单 的 涂鸦 板 程序 ， 这 一 节 只 是 实现 最 基本 的 鼠标 画 线 功能 。 


和 


环境 : Windows Xp + Qt 4.8.4+QtCreator 2.6.2 


目录 


e@ 一 、 实 现 涂 鸦 板 
e 二、 实现 放大 功能 


正文 


一 、 实 现 涂鸦 板 

1 新 建 Qt Gui 应 用 ， 项 目 名 称 为 pianter 3 ， 基 类 这 次 还 用 Qpialog ， 类 名 保持 Dialog 不 
变 即 可 。 

2 到 dialog.h 文件 中 ， 先 添加 头 文件 包含 : #include <QMouseEvent> 


后 添加 几 个 函数 的 声明 : 


protected : 
void pazntEvent(QPaintEvent *); 
void mousePressEvent(QMouseEvent *)，; 
void mouseMoveEvent (QMouseEvent *); 
void mouseReleaseEvent (QMouseEvent *); 


第 一 个 是 绘制 事件 处 理 函 数 ， 后 面 分 别 是 鼠标 按 下 、 移 动 和 释放 事件 的 处 理 函 数 。 


下 面 再 添加 几 个 private 私有 变量 声明 : 


QPixmap pix; 
QPoint lastPoint; 
QPoint endPoint; 


因为 在 元 数 里 声明 的 QPixmap 类 对 冀 是 临时 变量 ， 不 能 存储 以 前 的 值 ， 为 了 实现 保留 上 次 的 
绘画 结果 ， 我 们 需要 将 其 ee 量 。 后 面 两 个 QPoint 变量 存储 和 鼠标 指针 的 两 个 坐标 值 ， 
我 们 需要 用 这 两 个 坐标 值 完成 绘 


2 到 dialog.cpp 文件 中 ， 先 添加 头 文件 包含 : #include <QPainter> 


然后 在 构造 函数 中 添加 如 下 初始 代码 : 


resize(600, 500); // 窗 口 大 小 设置 为 600*500 
pix = QPixmap(200, 200); 
pix.fill(Qt: :white); 


下 面 添加 几 个 函数 的 定义 : 


void Dialog::paintEvent(QPaintEvent *) 
{ | 


a 
愉 标 担 针 列 据 


ZA 






QPainter pp(&pix); // 根据 鼠 
pp.drawLine(lastPoint, endPoint); 














lastPoint = endPoint; 
QPainter painter(this); 
painter.drawPixmap(0, 0, pix); 


这 里 使 用 了 两 个 点 来 绘制 线条 ， 这 两 个 点 在 下 面 的 鼠标 事件 中 获得 。 


void Dialog: :mousePressEvent(QMouseEvent *event ) 


{ 


if(event->button()==Qt::LeftButton) // 闪 标 左 键 按 下 
lastPoint = event->pos(); 


当 鼠 标 左 键 按 下 时 获得 开始 点 。 


void Dialog: :mouseMoveEvent (QMouseEvent *event ) 


{ 





if(event->buttons()&Qt::LeftButton) // 鼠 标 去 
1 


endPoint = event->pos(); 
update(); // 进 行 绘制 


当 鼠 标 移动 时 获得 结束 点 ， 并 更 新 绘制 。 调 用 update() 函数 会 执行 paintEvent() 函数 进行 重 
新 绘制 。 


void Dialog::mouseReleaseEvent(QMouseEvent *event ) 


{ 
if(event->button() == Qt::LeftButton) // 员 标 左 键 释放 
{ 
endPoint = event->pos(); 
update(); 
} 
} 


当 鼠 标 按 键 释放 时 也 进行 重 绘 。 


现在 运行 程序 ， 使 用 鼠标 在 白色 画布 上 进行 绘制 ， 发 现 已 经 实现 了 简单 的 涂鸦 板 功能 ， 效 果 
如 下 图 所 示 。 





二 、 实 现 放 大 功能 


前 面 已 经 实现 了 简单 的 绘制 功能 ， 下 面 我 们 将 实现 放大 功能 ， 将 画布 放大 后 继续 进行 涂鸦 。 
这 里 将 使 用 两 种 方法 来 实现 ， 也 是 对 上 一 节 坐标 系统 后 面 的 问题 的 更 进一步 的 应 用 实践 。 


1 . 添加 放大 按钮 。 到 dialog.h 文件 中 ， 先 添加 头 文件 : 


#include <QPushButton> 


然后 添加 下 面 private 私有 变量 声明 : 


qreal scale; 
QPushButton *button; 


最 后 再 添加 一 个 私有 槽 声明 : 


private Slots : 
void zoomIn( ) ; 


2 到 dialog.cpp 文件 中 ， 先 在 构造 函数 中 添加 如 下 代码 : 





button = new QPushButton(this); 








// 设 8 钮 显示 文本 

button- en 
// 设 置 按钮 放置 位 

OC ->move(s00, 450); 

// 对 按钮 的 单 1 和 其 档 函 数 进行 关 


ore on S Le (ec Le hed this, SLOT(zoomIn())); 


这 里 使 用 代码 创建 了 一 个 按钮 对 象 ， 并 将 其 单 击 信号 关联 到 了 放大 楷 上 ， 也 就 是 说 按 下 这 个 
按钮 ， 就 会 执行 zoomIn() 模 。 


3 .下面 添加 zoomIn() 的 定义 : 


void Dialog::zoomIn() 


{ 
Scale *=2， 
update( ); 


这 里 我 们 让 每 按 下 这 个 按钮 ， 放 大 值 都 扩大 两 位 。 后 面 调用 update() 哆 数 来 更 新 显示 。 


4 .通过 上 一 节 的 学 习 ， 我 们 应 该 已 经 知道 想 让 画布 的 内 容 放 大 有 两 个 办 法 ， 一 个 是 直接 放大 
画布 的 坐标 系统 ， 一 个 是 放大 窗口 的 坐标 系统 。 下 面 我 们 先 来 放大 窗口 的 坐标 系统 。 更 
改 paintEvent() 函数 如 下 : 


void Dialog::paintEvent(QPaintEvent *) 
{ 
QPainter PD(QPLX), 
pp.drawLine(lastPoint, endPoint); 
JastPoint = endPoint 
> painter (this); 
PAE 大 操作 
i scale(scale, scale); 
painter.drawPixmap(0, 0, pix); 


现在 运行 程序 ， 先 在 白色 画布 上 任意 绘制 一 个 图 形 ， 效 果 如 下 图 所 示 。 


ll Dialog 





然后 按 下 zoomIn 按钮 ， 效 果 如 下 图 所 示 。 


第 17 篇 2D 绘 图 (七 ) 涂鸦 板 


上 Dialog 





现在 再 用 鼠标 进行 绘制 ， 发 现 图 形 已 经 不 能 和 鼠标 轨迹 重合 了 ， 效 果 如 下 图 所 示 。 
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有 了 前 面 一 节 的 知识 ， 就 不 难 理 解 出 现 这 个 问题 的 原因 了 。 窗 口 的 坐标 扩大 了 ， 但 是 画布 的 
坐标 并 没有 扩大 ， 而 我 们 画图 用 的 坐标 值 是 鼠标 指针 的 ， 鼠 标 指 针 又 是 获取 的 窗口 的 坐标 
值 。 现 在 窗口 和 画布 的 同一 点 的 坐标 并 不 相等 ， 所 以 就 出 现 了 这 样 的 问题 。 


其 实 解决 办 法 很 简单 ， 窗 口 放 大 了 多 少 倍 ， 就 将 获得 的 鼠标 指针 的 坐标 值 缩 小 多少 倍 就 行 
了 。 我 们 将 paintEvent() 函数 更 改 如 下 : 


void Dialog::paintEvent(QPaintEvent *) 

{ 
QPainter pp(&pix); 
pp.drawLine(lastPoint/scale, endPoint/scale); 
JastPoint = endPoint; 
QPaunter panmter (EnLsy, 
painter.scale(scale, scale); 
painter.drawPixmap(0, 0, pix); 


运行 程序 ， 效 果 如 下 图 所 示 。 可 以 看 到 ， 已 经 能 够 在 放大 以 后 继续 绘图 了 。 





这 种 用 改变 窗口 坐标 大 小 来 改变 画布 面积 的 方法 ， 实 际 上 是 有 损 图 片 质量 的 。 就 像 将 一 张 位 
图 放大 一 样 ， 越 放大 越 不 清晰 。 原 因 就 是 ， 它 的 像素 的 个 数 没 有 变 ， 如 果 将 可 视 面 积 放大 ， 
那么 单位 面积 里 的 像素 个 数 就 变 少 了 ， 所 以 画 质 就 差 了 。 


5 方法 二 。 扩 大 画布 坐标 系统 。 先 将 paintEvent() 更 改 如 下 : 


void Dialog::paintEvent(QPaintEvent *) 
{ 
QPainter pp(&pix); 
pp.scale(scale, scale); 
pp.drawLine(lastPoint,endPoint); 
JastPoint = endPoint,; 
QPaznter pazmter( thys); 
painter.drawPixmap(0, 0, pix); 


时 运行 程序 ， 先 进行 绘制 ， 然 后 点 击 zoomIn 按钮 ， 发 现 以 前 的 内 容 并 没有 放大 ， 而 当 我 们 
绘画 时 ， 发 现 鼠 标 指 针 和 绘制 的 线条 又 不 重合 了 。 效 果 如 下 图 所 示 。 


roomIn 





这 并 不 是 我 们 想 要 的 结果 ， 为 了 实现 按 下 放大 按钮 ， 和 画布 和 图 形 都 进行 放大 ， 我 们 可 以 使 用 
缓冲 画布 (就 是 一 个 辅助 画布 ) 来 实现 。 将 paintEvent() 函数 内 容 更 改 如 下 。 


void Dialog::paintEvent(QPaintEvent *) 
if(scale!=1) // 如 果 进 行 放大 操作 
{ 


// 临 时 画布 ， 大 小 变化 了 scale 倍 

QPixmap copyPix(pix.size()*scale); 
QPainter pter(&copyPix); 
pter.scale(scale, scale); 

// 将 以 前 画布 上 的 内 容 复 制 到 现在 的 画布 上 
pter.drawPixmap(0, 0, pix); 

// 将 放大 后 的 内 容 再 复制 回 原来 的 画布 上 
pix = copyPix; 

// 让 scale 重 新 置 1 

Scale =1; 


QPainter pp(&pix); 

pp.scale(scale, scale); 
pp.drawLine(lastPoint/scale,endPoint/scale); 
JastPoint = endPoint; 

QPainter painter(this); 
painter.drawPixmap(0,0,pix); 


现在 运行 程序 ， 效 果 如 下 图 所 示 。 
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结语 
本 节 讲 到 的 涂鸦 板 ， 只 是 为 了 实践 前 面 的 知识 ， 起 到 抛砖引玉 的 作用 。 大 家 可 以 根据 自己 的 
理解 继续 探 完 下 去 。 在 下 一 节 ， 我 们 将 讲解 怎样 在 涂鸦 板 上 绘制 出 和 矩形、 椭圆 等 图 形 。 


木 程序 中 存在 一 些 问题 ， 如 果 大 家 想 进一步 学 习 研 究 ， 可 以 参考 下 载 页 面 的 涂鸦 板 开源 软 
件 。 


涉及 到 的 源码 
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导语 


在 前 面 一 节 中 ， 讲 述 了 如 何 实现 简单 的 涂鸦 板 ， 这 一 次 我 们 将 实现 在 涂鸦 板 上 绘制 图 形 ， 这 
里 以 矩形 为 例 进 行 讲 解 。 在 后 面 还 会 提出 双 缓 冲 绘图 的 概念 。 


环境 : Windows Xp + Qt 4.8.4+QtCreator 2.6.2 


目录 


e。 一、 绘制 矩形 
e 二 、 双 缓冲 绘图 


正文 
一 、 绘 制 矩 形 
:我们 仍然 在 前 面 程序 的 基础 上 进行 修改 ， 先 更 改 painEvent() 函数 : 


void Dialog::paintEvent(QPaintEvent *) 


{ 

QPainter painter(this); 

int x,y,w,nh; 

x = lastPoint.x(); 

y = lastPoint.y(); 

w = endPoint.x() - x; 

h = endPoint.y() - y; 

painter.drawRect(x, y, w, h); 
} 


这 里 就 是 通过 lastPoint 和 endPoint 两 个 点 来 确定 要 绘制 的 矩形 的 起 点 、 宽 和 高 的 。 运 行程 序 ， 
用 息 标 拖 出 一 个 矩形 ， 效 果 如 下 图 所 示 。 





2 . 上 面 已 经 可 以 拖 出 一 个 矩形 了 ， 但 是 这 样 直接 在 窗口 上 绘图 ， 以 前 画 的 矩形 是 不 能 保存 下 
来 的 。 所 以 我 们 下 面 加 入 画布 ， 在 画布 上 进行 绘图 。 将 paintEvent() 函数 更 改 如 下 : 


void Dialog::paintEvent(QPaintEvent *) 


{ 
int x,y,w,h; 
x = lastPoint.x(); 
y = lastPoint.y(); 
w = endPoint.x() - x; 
h = endPoint.y() - y; 
QPainter pp(&pix); 
pp.drawRect(x, y, w, h); 
QPainter painter(this); 
painter.drawPixmap(0, 0, pix); 
} 


这 里 就 是 将 图 形 先 绘制 在 了 画布 上 ， 然 后 将 画布 绘制 到 窗口 上 上。 我们 运行 程序 ， 然 后 使 用 鼠 
标 拖 出 一 个 矩形 ， 发 现 出 现 了 很 多 重 影 ， 效 果 如 下 图 所 示 。 





为 什么 会 出 现 这 种 现象 呢 ? 大 家 可 以 尝试 分 别 快速 拖 动 鼠标 和 慢 速 拖 动 鼠标 来 绘制 矩形 ， 结 
果 会 发 现 ， 拖 动 速度 越 快 ， 重 影 越 少 。 其 实 ， 在 我 们 拖 动 鼠标 的 过 程 中 ， 屏 幕 已 经 刷新 了 很 
多 次 ， 也 可 以 理解 为 paintEvent() 函数 执行 了 多 次 ， 每 执行 一 次 就 会 绘制 一 个 矩形 。 知 道 了 
原因 ， 就 有 方法 来 避免 这 个 问题 发 生 了 。 


二 、 双 缓冲 绘图 


1 我 们 再 添加 一 个 辅助 画布 ， 如 果 正 在 绘图 ， 也 就 是 鼠标 按键 还 没有 释放 的 时 候 ， 就 在 这 个 
辅助 画布 上 绘图 ， 只 有 当 筷 标 按键 释放 的 时 候 ， 才 在 丨 正 的 画布 上 绘图 。 


首先 在 dialog.h 文件 中 添加 两 个 私有 变量 : 


QPixmap tempPix; // 辅 助 副 布 
bool isDrawing; // 标 志 是 否 正 在 绘图 


然后 到 dialog.cpp 的 构造 函数 中 对 变量 进行 初始 化 : 


isDrawing = false; 


下 面 再 更 改 paintEvent() 函数 : 


void Dialog::paintEvent(QPaintEvent *) 


{ 
int x,y,w,h; 
x = lastPoint.x(); 
y = lastPoint.y(); 
w = endPoint.x() - x; 
h = endPoint.y() - y; 
QPainter painter(this); 
if(isDrawing) // 如 果 正 在 绘图 ， 就 在 辅助 画布 上 绘制 
// 将 以 前 pix 中 的 内 容 复 制 到 tempPix 中 ， 保 证 以 前 的 内 容 不 消失 
tempPix = pix; 
QPainter pp(&tempPix); 
pp.drawRect (x,y,w,nh); 
painter.drawPixmap(0, 0, tempPix); 
} else { 
QPainter pp(&pix); 
pp.drawRect (x,y,w,h); 
painter.drawPixmap(0,0,pix); 
} 
} 


下 面 还 需要 更 改 和 鼠标 按 下 事件 处 理 函 数 和 鼠标 释放 事件 处 理 函 数 的 内 容 : 


void Dialog: :mousePressEvent(QMouseEvent *event ) 


{ 
if(event->button()==Qt::LeftButton) // 中 标 左 键 按 下 
JastPoint = event->pos(); 
isDrawing = true; // 正 在 绘图 
} 
void Dialog: :mouseReleaseEvent(QMouseEvent *event) 
{ 
if(event->button() == Qt::LeftButton) // 员 标 堪 键 释放 
{ 
endPoint = event->pos(); 
isDrawing = false; // 结 束 绘图 
update(); 
} 
} 


当 和 鼠标 左 键 按 下 时 我 们 开始 标记 正在 绘图 ， 当 按键 释放 时 我 们 取消 正在 绘图 的 标记 。 现 在 运 
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2 . 双 缓 冲 绘图 


根据 这 个 例子 所 使 用 的 技巧 ， 我 们 引出 所 谓 的 双 缓 冲 绘图 的 概念 。 双 缓冲 〈double-buffers ) 
绘图 ， 就 是 在 进行 绘制 时 ， 先 将 所 有 内 容 都 绘制 到 一 个 绘图 设备 (如 Qpixmap ) 上 ， 然 后 再 
将 整个 图 像 绘 制 到 部 件 上 显示 出 来 。 使 用 双 缓 冲 绘图 可 以 避免 显示 时 的 闪烁 现象 。 从 Qt 4.0 开 
始 ，Qwidget 部 件 的 所 有 绘制 都 自动 使 用 了 双 缓 冲 ， 所 以 一 般 没 有 必要 在 paintEvent() 函数 
中 使 用 双 缓 冲 代码 来 避免 闪烁 。 


虽然 在 一 般 的 绘图 中 无 需 手 动 使 用 双 缓 冲 绘图 ， 不 过 要 想 实 现 一 些 绘图 效果 ， 还 是 要 借助 于 
双 缓 冲 的 概念 。 比 如 这 个 程序 里 ， 我 们 要 实现 使 用 鼠标 在 界面 上 绘制 一 个 任意 大 小 的 矩形 。 
这 里 需要 两 张 画布 ， 它 们 都 是 Qpixmap 实例 ， 其 中 一 个 temppix 用 来 作为 临时 缓冲 区 ， 当 息 
标 正 在 拖 动 矩形 进行 绘制 时 ， 将 内 容 先 绘制 到 tempPix 上 ， 然 后 将 tempPix 绘制 到 界面 上 ; 
而 另 一 个 pix 作为 缓冲 区 ， 用 来 保存 已 经 完成 的 绘制 。 当 松 开 和 鼠标 完成 矩形 的 绘制 后 ， 则 
将 tempPix 的 内 容 复 制 到 piXx 上 “。 为 了 绘制 时 不 显示 拖 影 ， 而 且 保证 以 前 绘制 的 内 容 不 消失 ， 
那么 在 移动 鼠标 过 程 中 ， 每 绘制 一 次 ， 都 要 在 绘制 这 个 天 形 的 原来 的 图 像 上 进行 绘制 ， 所 以 
需要 在 每 次 绘制 tempPix 之 前 ， 先 将 pix 的 内 容 复 制 到 tempPix 上 。 因为 这 里 有 两 

个 Qpixmap 对 象 ， 也 可 以 说 有 两 个 缓冲 区 ， 所 以 称 之 为 双 缓 冲 绘图 。 


对 于 Qt 基本 绘图 的 内 容 ， 我 们 就 讲 到 这 里 ， 如 果 大 家 还 想 更 加 系统 深入 的 学 习 这 些 基础 知 
识 ， 可 以 参考 《Qt Creator 快 速 入 门 》 的 第 10 章 。 从 下 一 节 开 始 ， 我 们 将 简单 介绍 一 下 Qt 中 得 
图 形 视图 框架 。 


涉及 到 的 源码 
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导语 


在 前 面 讲 的 基本 绘图 中 ， 我 们 可 以 自己 绘制 各 种 图 形 ， 并 且 控 制 它们 。 但 是 ， 如 果 需 要 同时 
绘制 很 多 个 相同 或 不 同 的 图 形 ， 并 且 要 控制 它们 的 移动 ， 检 测 它 们 的 碰撞 和 县 加 ; 或 者 我 们 
想 让 自己 绘制 的 图 形 可 以 拖 动 位 置 ， 进 行 缩放 和 旋转 等 操作 。 实 现 这 些 功 能 ， 要 是 还 使 用 以 
前 的 方法 ， 那 么 会 十 分 困难 。 解 决 这 些 问题 ， 可 以 使 用 Qt 提供 的 图 形 视图 框架 。 


图 形 视图 可 以 对 大 量 定制 的 2D 图 形 项 进行 管理 和 相互 作用 。 视 图 部 件 可 以 让 所 有 图 形 项 可 视 
化 ， 它 还 提供 了 缩放 和 旋转 功能 。 我 们 在 帮助 中 搜索 Graphics view 关键 字 ， 内 容 如 下 图 : 


Graphics View provides a surface for managing and interacting with a large number 
of custom-made 2D graphical items, and a view widget for visualizing the items, with 
support forzooming and rotation 


The framework includes an event propagation architecture that allows precise 
double-precision interaction capabilities for the items on the scene. ltems can 
handle key events, mouse press, move, release and double click events, and they 
can also track mouse movement 


Graphics View uses a BSP (Binary Space Partitioning) tree to provide very fast item 
discovery, and as a result of this, it can visualize large scenes in real-time, even 
with millions of items. 


Graphics View Was introduced in Qt 4.2. replacing its predecessor QCanvas. If you 
are porting from QCanvas. see Porting to Graphics View 


Topics: 


The Graphics View Architecture 


这 里 一 开始 对 这 个 框架 进行 了 简单 介绍 ， 整 个 图 形 视图 结构 主要 包含 三 部 分 : 场景 

( scene ) 、 视 图 ( view ) 和 图 形 项 ( Item ) ， 它 们 分 别 对 应 QGraphicsScene 

、 Q6raphicsview 、QGraphicsltem 三 个 类 。 其 实 图 形 视 图 框架 是 一 组 类 的 集合 ， 在 帮助 中 可 
以 看 到 所 有 与 它 相 关 的 类 。 下 面 我 们 就 开始 结合 程序 对 整个 框架 进行 介绍 。 


环境 : Windows Xp + Qt 4.8.4+QtCreator 2.6.2 


目录 


。 一 、 基 本 应 用 

。 二 、 图 形 项 (QGraphicsltem ) 
o (一 ) 自 定义 图 形 项 
o (二 ) 光标 和 提示 


o (三 ) 拖 放 

o (四 ) 键盘 与 鼠标 事件 
o (五 ) 碰撞 检测 

o (六 ) 移动 

o (七 ) 动画 

so (入) 澳 姑 3 


正文 
一 、 基 本 应 用 


我 们 新 建 空 的 Qt 项 目 (在 其 他 项 目 中 ) ， 项 目 名 称 为 graphicsView6e1 。 然 后 在 这 个 项 目 中 添 
加 新 的 C++ 源 文件 ， 命 名 为 main.cpp 。 


我 们 将 main.cpp 的 内 容 更 改 如 下 。 


#include <QtGui> 


intemaan(ant ardgerchar armyvpy 


{ 
QApplication app(argc,argv); 
QGraphicsScene *scene = new QGraphicsScene; // 场 景 
QGraphicsRectItem “item = new QGraphicsRectItem(109,100,50,50); // 怎 形 项 
scene->addItem(item); // 项 添加 到 场景 
QGraphicsView *view = New OCT rn Te io // 视 图 
View->setScene(Sscene); // 视 图 关联 场景 
View->show(); /7 显示 视图 
return app.exec(); 
} 
这 里 我 们 建立 了 一 个 最 简单 的 基于 这 个 图 形 视图 框架 的 程序 。 分 别 新 建 了 一 个 场景 ， 一 个 图 
形 项 和 一 个 视图 ， 并 将 图 形 项 添加 到 场景 交 视 国 与 志 基 联 ， 时 后 显示 入 国 二 可 以 了 
基于 这 个 框架 的 所 有 程序 都 是 这 样 实现 的 。 运 行 效果 如 下 。 
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就 像 我 们 看 到 的 ， 场 景 是 管理 图 形 项 的 ， 所 有 的 图 形 项 必须 添加 到 一 个 场景 中 ， 但 是 场景 本 
身 无 法 可 视 化 ， 我 们 要 想 看 到 场景 上 的 内 容 ， 必 须 使 用 视图 。 下 面 我 们 分 别 对 图 形 项 、 场 景 
和 视图 进行 介绍 。 


二 、 图 形 项 ( Q6raphicsItem ) 


QGraphicsItem 类 是 所 有 图 形 项 的 基 类 。 图 形 视图 框架 对 一 些 典 型 的 形状 提供 了 一 些 标准 的 图 
形 项 。 比 如 上 面 我 们 使 用 的 矩形 ( QGraphicsRectItem ) 、 椭 圆 ( Qe6raphicsEllipseItem ) 、 
文本 ( RE DD 等 多 个 图 形 项 。 但 只 有 继承 QGraphicsItem 类 实现 我 们 自 定义 的 
图 形 项 时 ， 才 能 显示 出 这 个 类 的 强大 。 Q6raphicsItem 支持 以 下 功能 : 


。 和 鼠标 的 按 下 、 和 移动、 释放 和 双击 事件 ， 也 支持 鼠标 悬 停 、 滚 轮 和 右键 菜单 事件 。 
。 键盘 输入 焦点 和 键盘 事件 

。 拖 放 

。 利用 QGraphicsltemGroup 进 行 分 组 

。 碰撞 检测 


(一 ) 自 定义 图 形 项 
1 在 前 面 的 项 目 中 添加 新 的 C++ 类 ， 类 名 设 为 MyItem ， 基 类 设 为 QGraphicsItem ° 


2 ， 我 们 在 myitem.h 文件 中 添加 头 文件 #include <Qt6ui> 。 (说 明 : QtGui 模块 里 面 
ee ， 所 以 为 了 简便 ， 这 里 只 包含 了 该 头 文 件 ， 正 式 开 发 程序 时 不 推荐 
么 做 1 ) 


3 再 添加 两 个 函数 的 声明 : 


QRectFboundingRect() const,; 
voidpaint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget*widget); 


4 下 面 到 myitem.cpp 中 对 两 个 函数 进行 定义 : 


QRectFMyItem: :boundingRect() const 
qreal penwidth = 1; 


return QRectF(0 - penwidth / 2, 0 -penwWidth / 2, 
20 + penwWidth, 20 + penwidth); 


voidMyItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option,QWidget *w 
idget) 


{ 

Q_UNUSED(option); // 标 明 该 参数 没有 1 
Q_UNUSED (widget ); 
painter->setBrush(Qt::red); 
painter->drawRect(0,0,20,20); 


5 下面 到 main.cpp 中 添加 #include "myitem.h" 


天 后 将 以 前 那个 矩形 项 的 定义 语句 改 为 : 


MyItem *item =new MyItem; 


运行 程序 ， 效 果 如 下 
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可 以 看 到 ， 我 们 要 继承 QGraphicsItem 类 实现 自 定 义 的 图 形 项 ， 必 须 先 实现 两 个 纯 虚 函 
数 poundingRect() 和 paint() ， 前 者 用 于 定义 Item 的 绘制 范围 ， 后 者 用 于 绘制 图 形 项 。 其 
实 boundingRect() 还 有 很 多 用 途 ， 后 面 会 涉及 到 。 


(二 ) 光标 和 提示 
1 .在 myitem.cpp 中 的 构造 函数 中 添加 两 行 代码 ， 如 下 : 


MyItem: :MyItem() 
{ 


setToolTip("Click and drag me!"); // 提 示 
setCursor(Qt::OpenHandCursor);  // 改 变 光 标 形状 


} 


然后 运行 程序 ， 效 果 如 下 : 





当 光 标 放 到 小 方块 上 时 ， 光 标 变 为 了 手 型 ， 并 且 弹 出 了 提示 。 更 多 的 光标 形状 可 以 查看 
Qt::CursorShape ， 我 们 也 可 以 使 用 图 片 自 定义 光标 形状 。 
(三 ) 拖 放 
下 面 写 这 样 一 个 程序 ， 有 几 个 不 同 颜 色 的 圆 形 和 一 个 大 和 矩形， 我 们 可 以 拖 动 圆 形 到 矩形 上 ， 
从 而 改变 矩形 的 颜色 为 该 圆 形 的 颜色 。 
1 将 上 面 的 程序 进行 改进 ， 用 来 实现 圆 形 图 形 项 。 
在 myitem.h 中 添加 一 个 私有 变量 和 几 个 键盘 事件 处 理 函 数 的 声明 : 
protected : 
void mousePressEvent(QGraphicsSceneMouseEvent *event ) ; 
void mouseMoveEvent(QGraphicsSceneMouseEvent *event ) ; 
void mouseReleaseEvent(QGraphicsSceneMouseEvent *event ) ， 


private : 
QColor color; 


2 然后 到 myitem.cpp 中 ， 在 构造 函数 中 初始 化 颜色 变量 : 


color = QColor(qrand() % 256，gqrand() %256，gqrand() % 256); / /初始 化 随机 头 色 


在 paint() 函数 中 将 绘制 矩形 的 代码 更 改 如 下 : 


painter->setBrush(color); 
painter->drawEllipse(0, 0, 20, 20); 


3 .下面 我 们 定义 几 个 键盘 事件 处 理 函 数 : 


voidMyItem: :mousePressEvent(QGraphicsSceneMouseEvent *event ) 


{ 
if(event->button() != Qt::LeftButton) 


{ 
event->ignore(); // 如 果 不 是 鼠标 左 键 按 下 ， 则 忽略 该 事件 
neturm, 


setCursor(Qt::ClosedHandCursor ); // 如 果 是 鼠标 堪 键 按 下 ， 改 变 光标 形状 


voidMyItem: :mouseMoveEvent(QGraphicsSceneMouseEvent *event ) 


If(QLineF(event->screenPos( )，,event->buttonDownScreenPos(Qt: :LeftButton ) ) 
.length() < QApp1lication::startDragDistance()) 





// 如 果 和 鼠标 按 下 的 点 到 现在 的 点 的 距离 小 于 程序 默认 的 拖 动 距离 ， 表 明 没 有 拖 动 ， 则 返回 
returm, 
} 
QDrag *drag = new QDrag(event->widget()); / /为 event:/ 2 口 部 件 新 建 拖 动 对 象 
QMimeData *mime = new QMimeData; // 新 建 OQMimeData 对 象 ， 它 用 来 存储 拖 动 的 数据 


drag->setMimeData(mime); / /关联 
mime->setColorData(color); // 放 入 厌 色 数据 


QPixmap pix(21,21); // 新 建 QPIxmap 对 象 ， 它 用 来 重新 绘制 圆 形 ， 在 拖 动 时 显示 
pix.fill(Qt::white)， 

QPainter painter(&pix); 

paint(&painter,0,o0); 

drag->setPixmap(pix); 


drag->setHotSpot(QPoint(10，15)); // 我 们 让 指针 指向 圆 形 的 (10, 15) 点 


drag->exec(); // 开 始 抱 动 
setCursor(Qt::0penHandCursor);  // 改 变 光 标 形状 


voidMyItem: :mouseReleaseEvent(QGraphicsSceneMouseEvent *event) 


setCursor(Qt::0OpenHandCursor); // 改 变 光标 形状 


此 时 运行 程序 ， 效 果 如 下 : 
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4 .下面 我 们 新 添 一 个 类 ， 它 用 来 提供 矩形 图 形 项 ， 并 且 可 以 接收 拖 动 的 数据 。 
在 myitem.h 中 ， 我 们 加 入 该 类 的 声明 : 


class RectItem : public QGraphicsItem 


publiec: 
RectItem( ); 
QRectF boundingRect() const ， 
void paint(QPainter *painter, const QStyleOptionGraphicsItem *option,QWidget *widge 
t); 
protected: 
void dragEnterEvent(QGraphicsSceneDragDropEvent *event); // 拖 动 进 ef 
void dragLeaveEvent(QGraphicsSceneDragDropEvent *event); // 拖 动 离 
void dropEvent(QGraphicsSceneDragDropEvent *event); // 放 入 事件 
private: 
QColor color; 
bool dragOver; // 标 志 是 否 有 拖 动 进入 








}; 


5. 然后 进入 myitem.cpp 进行 相关 函数 的 定义 : 


RectItem: :RectItem() 


{ 
setAcceptDrops(true); // 设 置 接收 拖 放 
color = QColor(Qt::1lightGray); 
} 
QRectF RectItem: :boundingRect() const 
{ 
returniQRectF(0, 0 SO. 50), 
} 
void RectIitem::paint(QPainter *painter,const QStyleOptionGraphicsIitem *option, QWidget 
*widget) 
{ 
painter->setBrush(dragover? color.light(130) : color); // 如 果 其 上 有 拖 动 ， 磊 色 变 亮 
painter->drawRect(0,0,50,50); 
} 
voidRectItem: :dragEnterEvent(QGraphicsSceneDragDropEvent *event) 
{ 
if(event->mimeData()->hasColor()) // 如 果 拖 动 的 数据 中 有 了 颜色 数据 ， 便 接收 
{ 
event->setAccepted(true); 
dragover = true,; 
update(); 
} 
else event->setAccepted(false); 
} 


voidRectItem: :dragLeaveEvent(QGraphicsSceneDragDropEvent *event) 


Q_UNUSED (event ); 
dragover = false; 


update(); 
} 
void RectItem: :dropEvent(QGraphicsSceneDragDropEvent*event ) 
{ 


dragOver = false; 
if(event- >mi EL 





A 





// 我 们 通过 类 颜色 
color =qvariantValue<QColor>(event- >mimeData( )->colorData( )); 
update(); 


6 .下 面 进入 main.cpp 文件 ， 更 改 main() 函数 中 的 内 容 如 下 : 


int main(int argc,char* argv[ ]) 


{ 
QApplication app(argc,argv); 


qsrand(QTime(0,0,0).secsTo(QTime::currentTime())); / /设置 随机 数 初 什 
QGraphicsScene *scene = new QGraphicsScene ; 


for(int i=0; i<5; i++) // 在 不 同位 置 新 建 5 个 圆 形 


MyItem *item = new MyItenm; 
item->setPos(i*50+20,100); 
scene->addItem(item); 


RectItem *rect = new RectItem; // 新 建 和 矩形 
rect->setPos(100,200); 
scene->addItem(rect); 

QGraphicsView *view = new QGraphicsView; 
View->setScene(scene); 
View->resize(400,300); // 设 置 视图 大 小 
view->show( ); 


return app.exec(); 


这 是 运行 程序 ， 效 果 如 下 : 
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这 时 我 们 已 经 实现 了 想 要 的 效果 。 可 以 看 到 ， 要 想 实 现 抑 放 ， 必 须 源 图 形 项 和 目标 图 形 项 都 
进行 相关 设置 。 在 源 图 形 项 的 鼠标 事件 中 新 建 并 执行 拖 动 ， 而 在 目标 图 形 项 中 必须 指 

定 setAcceptDrops(true); 这 个 函数 ， 这 样 才 能 接收 拖 放 ， 然 后 需要 实现 拖 放 的 几 个 事件 处 理 
函数 。 


(四 ) 键盘 与 鼠标 事件 


1 新 建 项 目 graphicsviewg2 ， 然 后 按照 (一 ) 中 自 定义 图 形 项 进行 操作 (可 以 直接 把 那里 的 
代码 拷贝 过 来 ) 。 下 面 我 们 先 来 看 键盘 事件 。 


2 .在 myitem.h 文件 中 声明 键盘 按 下 事件 处 理 函 数 : 


protected : 
voidkeyPressEvent(QKeyEvent *event); 


然后 在 myitem.cpp 中 进行 定义 : 


void MyItem: :keyPressEvent(QKeyEvent*event) 
{ 


} 


moveBy(0，10); // 相 对 现在 的 位 置 移动 


这 时 运行 程序 ， 发 现 无 论 怎样 方块 都 不 会 移动 。 其 实 要 想 使 图 形 项 接收 键盘 事件 ， 就 必须 使 
其 可 获得 焦点 。 我 们 在 构造 函数 里 添加 一 行 代码 : 


setFlag(QGraphicsItem::ItemIsFocusable); // 图 形 项 可 获得 焦点 


(我 们 在 新 建 图 形 项 时 指定 也 是 可 以 的 ， 


如 item->setFlag(QGraphicsItem::ItemIsFocusable); ) 


这 时 运行 程序 ， 然 后 用 鼠标 点 击 一 下 方块 ， 再 按 下 任意 按键 ， 方块 就 会 向 下 移动 。 效 果 如 下 
图 所 示 。 
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3 . 再 看 鼠标 事件 。 我 们 先 在 myitem.h 文件 中 声明 鼠标 按 下 事件 处 理 函 数 : 


voidmousePressEvent(QGraphicsSceneMouseEvent *event ) ; 


然后 再 myitem.cpp 文件 中 对 其 进行 定义 : 


voidMyItem: :mousePressEvent(QGraphicsSceneMouseEvent *event ) 


moveBy(10,0); 


此 时 运行 程序 ， 点 击 小 方块 ， 它 便 会 向 右 移动 。 如 果 我 们 想 让 鼠标 可 以 拖 动 小 方块 ， 那 么 我 
们 可 以 重新 实现 mouseMoveEvent() 元 数 ， 还 有 一 种 更 简单 的 方法 是 ， 我 们 在 构造 函数 中 指明 
该 图 形 项 是 可 移动 的 : 


setFlag(QGraphicsItem::ItemIsMovable); 


(当然 我 们 也 可 以 在 新 建 图 形 项 时 指定 它 ) 


运 外 了 于 程序 > 效果 如 下 : 
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(五 ) 碰撞 检测 
下 面 先 看 一 个 例子 ， 再 进行 讲解 


我 们 将 上 面 程序 中 myitem.cpp 文件 中 的 paint() 函数 中 的 设置 画 刷 的 代码 更 改 如 下 : 


// 如 果 与 其 他 图 形 项 碰撞 则 显示 红色 ， 否 则 显示 绿色 
painter->setBrush(!collidingItems().isEmpty()?Qt::red : Qt::green); 


然后 再 main.cpp 文件 中 在 场景 中 添加 一 个 直线 图 形 项 : 


QGraphicsLineItem *line = newQGraphicsLineItem(0,50,300,50); 
scene->addItem(line); 


这 时 运行 程序 ， 效 果 如 下 : 


WW graphicsYiew02 加 回国 





刚 开 始 ， 方 块 是 绿色 的 ， 当 我 们 拖 动 它 与 直线 相交 时 ， 它 就 变 成 了 红色 “。 


在 QGraphicsItem 类 中 有 三 个 碰撞 检测 函数 ， 分 别 

是 collideswithItem( )、 A) 和 collidingItems() ， 我 们 使 用 的 是 第 三 个 。 第 
一 个 是 该 图 形 项 是 否 与 指定 的 图 形 项 碰撞 ， 第 二 个 是 该 图 形 项 是 否 与 指定 的 路 径 碰 撞 ， 第 三 
个 是 返回 所 有 与 该 图 形 项 碰撞 的 图 形 项 的 列表 。 在 帮助 中 我 们 可 以 查看 它们 的 函数 原型 和 介 
绍 ， 这 里 想 说 明 的 是 ， 这 三 个 ee 同 的 参数 Qt::ItemselectionMode ， 它 指明 了 怎 
样 去 检测 碰撞 。 我 们 在 帮助 中 进行 查看 ， 可 以 发 现 它 是 一 个 枚 举 变量 ， 一 共有 四 个 值 ， 分 别 
是 : 


时 ; 
时 ， 或 者 图 形 项 与 其 边界 相 


e Qt::ContainsItemShape : 只 有 图 形 项 的 shape 被 完 


i 


全 包含 
e Qt::IntersectsItemShape : 当 图 形 项 的 Shape 被 完全 包含 时 


父 ， 


© Qt::CcontainsItemBoundingRect ， 只 有 图 形 项 的 bounding rectangle 被 完全 包含 时 ; 
© Qt::IntersectsItemBoundingRect : 图 形 项 的 boundingrectangle 被 完全 包含 时 ， 或 者 图 形 
项 与 其 边界 相交 。 


如 果 我 们 不 设置 该 参数 ， 那 么 他 默认 使 用 Qt::IntersectsItemShape 。 这 里 所 说 的 shape 是 指 
呢 ? 在 QGraphicsitem 类 中 我 们 可 以 找到 shape() 函数 ， 它 返回 的 是 一 

个 QPainterPath 对 象 ， 也 就 是 说 它 能 确定 我 们 图 形 项 的 形状 。 但 是 默认 的 ， 它 只 是 返 
回 boundingRect() 元 数 返 回 的 矩形 的 形状 。 下 面 我 们 具体 验证 一 下 。 


在 main.cpp 函数 中 添加 两 行 代码 : 


qDebug()<< item->shape();  // 输 出 item 的 shape 信 息 
qDebug()<< item->boundingRect(); // 输 出 item 的 boundingRect 信 息 


这 时 运行 程序 ， 在 下 面 的 程序 输出 窗口 会 输出 如 下 信息 : 
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Starting E:\Qt2010\eraphicsViewD2\debue\er aphicsViewD2. exe... 
QFainterPath: Element count=5 

-> MoveTo (x=-0.5, y=-0.5) 

-> LineTo (x=20. 5, y=-0.5) 

-> LineTo (x=20. 5, y=20.5) 

-> LineTo (x=-0. 5, y=20.5) 

-> LineTo (x=-0.5, v=-0.5) 


QRectF [(-0.5, -0.5 21x21) 
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我 们 发 现 ， 现 在 shape 和 boundingRect 的 大 小 是 一 样 的 。 这 时 我 们 在 到 myitem.cpp 中 更 改 子 
数 poundingRect() 函数 中 的 内 容 ， 将 大 小 由 20， 改 为 50 : 


return QRectF(90 - penwidth / 2, 0 -penwidth / 2, 
50 + penwidth，50 + penwidth); 


这 时 再 次 运行 程序 ， 效 果 如 下 : 
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QPainterPath: Element count=5 
-> NoveTo (x=-0.5, v=-0.5) 
-> LineTo (x=50.5, v=-0.5) 
-> LineTo (x=50.5, y=50.5) 
-> LineTo (x=-0.5, v=50.5) 
-> LineTo (x=-0.5, y=-0.5) 


QRectF (-0.5, -0.5 51x51) 


小 方块 一 出 来 便 成 为 了 红色 ， 下 面 的 输出 信息 也 显示 了 ， 现 在 shape 的 大 小 也 变 成 了 50。 怎 
样 才 能 使 小 方块 按照 它 本 身 的 形状 ， 而 不 是 其 boundingRect 的 大 小 来 进行 碰撞 检测 呢 ? 我 们 
需要 重新 实现 shape() 函数 。 


在 myitem.h 中 ， 我 们 在 public 里 进行 函数 声明 : Qpainterpath shape() const; 


然后 到 myitem.cpp 中 进行 其 定义 : 


QPainterPath MyItem: :shape() const 

{ 
QPainterPath path; 
path.addRect(0,0,20,20);  // 图 形 项 的 路 实 大 小 
return path ; 


} 


这 时 我 们 再 运行 程序 ， 效 果 如 下 : 
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Starting E: “Qt2010\eraphicsViewD2\debue\er aphicsVie 
QFainterPath: Element count=5 

-> MoveTo (x=0, y=0) 

-> LineTo (x=20, y=0) 

-> LineTo (x=20, y=20) 

-> LineTo (x=0, y=20) 

-> LineTo (x=0, y=0) 





QRectF [-0.5, -0.5 Silx51) 


可 以 看 到 ， 现 在 shape 和 boundingRect 的 大 小 已 经 不 同 了 。 所 以 对 于 不 是 和 矩形 的 形状 ， 我 们 
都 可 以 利用 shape() 函数 来 返回 它 的 真实 形状 。 


(六 ) 移动 


对 于 图 形 项 的 移动 ， 我 们 有 很 多 办 法 实现 ， 也 可 以 在 很 多 层面 上 对 其 进行 控制 ， 比 如 说 

在 view 上 控制 或 者 在 scene 上 控制 。 但 是 对 于 大 量 的 不 同类 型 的 图 形 项 ， 怎 样 能 一 起 控制 
呢 ? 在 图 形 视图 框架 中 提供 了 advance() 模 函数 ， 这 个 函数 

在 QGraphicsScene 和 QGraphicsItem 中 都 有 ， 在 图 形 项 类 中 它 的 原型 是 advance(int phase) ° 
它 的 实现 流程 有 是， 我们 利用 QGraphicsScene 类 的 对 象 调用 QGraphicsScene 的 advance() 函 
数 ， 这 时 就 会 执行 两 次 该 场景 中 所 有 图 形 项 的 advance(int phase) 函数 ， 第 一 次 phase 为 0， 
告诉 所 有 图 形 项 即将 要 移动 ; 第 二 次 phase 的 值 为 1， 这 时 执行 移动 。 下 面 我 们 看 一 个 例子 。 


我 们 在 myitem.h 中 的 protected 中 声明 函数 : void advance(int phase ) ; 


后 在 myitem.cpp 中 对 其 进行 定义 : 


void MyItem: :advance(int phase) 


if(!phase) return; // 如 果 phase 为 0， 则 返回 


moveBy(0,10); 
} 


在 到 main.cpp 中 添加 以 下 代码 : 


QTimer timer ， 
QObject::connect(&timer, SIGNAL(timeout()),scene, SLOoOT(advance())); 


timer.start(1000); 


这 时 运行 程序 ， 小 方块 就 会 每 秒 下 移 一 下 。 
七) 动画 


其 实 实现 图 形 项 的 动画 效果 ， 也 可 以 在 不 同 的 层面 进行 。 如 果 我 们 只 想 控制 一 两 个 图 形 项 的 
Re 个 对 象 都 进行 同样 的 动 
么 我 们 就 可 以 在 图 形 项 类 中 进行 实现 。 我 们 先 看 一 个 例子 


在 myitem.cpp 文件 中 的 构造 函数 中 添加 代码 : 


MyItem: :MyItem( ) 


setFlag(QGraphicsItem::ItemIsFocusable); / 
setFlag(QGraphicsItem: Gm OMeab he AE 9 
QGraphicsItemAnimation “anim = New QeraphicsTtenAnimation; // 新 建 动画 类 对 象 
anim->setItem(this); // 将 该 图 形 项 加 入 动画 类 对 众 

QTimeLine *timeLine = new QrineLine(1000); 
timeLine->setLoopCount(0); //53 环 
anim->setTimeLine(timeLine); / /7 
anim->setRotationAt(0.5,180); /7 
anim->setRotationAt(1,360); //z 
timeLine->start(); // 开 始 动画 










360 扩 


这 时 执行 程序 ， 效 果 如 下 


ll graphicsYIe02 加 | 





小 方块 会 在 一 秒 内 旋转 一 圈 。 我 们 这 里 使 用 了 Q6raphicsItemAnimation 动画 类 和 QTimeLine 时 
间 线 类 ， 关 于 这 些 内 容 我 们 会 在 后 面 的 动画 框架 中 细 讲 ， 所 以 在 这 里 就 不 再 介绍 。 


(人 入) 右键 菜 六 


图 形 项 支持 右键 菜单 ， 不 过 QGraphicsItem 类 并 不 是 从 Qobject 类 继承 而 来 的 ， 所 以 它 默 认 不 
能 使 用 信号 和 槽 机制 ， 为 了 能 使 用 信号 和 槽 ， 我 们 需要 将 我 们 的 MyItem 类 进行 多 重 继 承 。 


在 myitem.h 中 ， 将 MyItem 类 改 为 


class MyItem : public QObject, publicQGraphicsItem 


Q_OBJECT  ” // 进 行 宏 定义 


这 样 我 们 就 可 以 使 用 信号 和 槽 机制 了 ， 这 时 我 们 在 下 面 添加 一 个 槽 : 


public Slots : 
void moveTo(){setPos(0,0);} 


因为 其 实现 的 功能 很 简单 ， 我 们 在 声明 它 的 同时 进行 了 定义 ， 就 是 让 图 形 项 移动 
到 (6,9) 点 。 然后 我 们 在 protected ge 


voidcontextMenuEvent(QGraphicsSceneContextMenuEvent *event); 


最 后 我 们 在 myitem.cpp 文件 中 对 该 事件 处 理 函数 进行 定义 : 


voidMyItem: :contextMenuEvent(QGraphicsSceneContextMenuEvent *event ) 


{ 
QMenu menu,; 
QAction *action = menu.addAction("moveTo(Q0,0)"); 
connect(action, Ce this es 
menu.exec(event->screenPos()); // 在 按 下 鼠标 左 键 的 地 方 弹出 菜 


这 里 我 们 只 是 设置 了 一 个 菜单 ， 当 按 下 该 菜单 是 ， 图 形 项 移动 到 (9,9) 点 。 


我 们 运 了 于 程序 ， 效 果 如 下 : 


第 19 篇 2D 绘 图 ( 九 ) 图 形 视图 框架 (上 ) 
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结语 


这 一 节 先 介绍 了 图 形 项 的 相关 内 容 ， 而 场景 、 视 图 等 内 容 放 到 下 一 节 来 讲 。 
涉及 到 的 源码 ; 


。 graphicsView01.zip 
e。 graphicsView02.zip 
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第 20 篇 2D 绘 图 (十 ) 图 形 视 图 框架 (下) 


导语 


环境 : Windows Xp + Qt 4.8.4+QtCreator 2.6.2 


目录 


。 三 、 场 景 (QGraphicsScene) 
o (一 ) 场景 层 
o (二 ) 索引 算法 
o (三 ) 边界 矩形 
o (四 ) 图 形 项 查找 
o (五 ) 事件 处 理 和 传播 
o (六 ) 打印 
。 四 、 视 图 (QGraphicsView) 
o (一 ) 缩放 与 旋转 
o (二 ) 场景 边框 与 场景 对 齐 方 式 
o (三 ) 拖 动 模式 
o (四 ) 事件 传递 
o (五 ) 背景 缓存 
o (六 ) OpenGL 泻 娄 
o (七 ) 图 形 项 查找 与 图 形 项 组 
o (人 入) 打印 


三 、 场 景 ( QGraphicsScene ) 
QGraphicsscene 提供 了 图 形 视图 框架 的 场景 ， 它 有 以 下 功能 : 


。 提供 了 一 个 管理 大 量 图 形 项 的 快速 接口 
。 向 每 个 图 形 项 传播 事件 

e 管理 图 形 项 的 状态 ， 比 如 选择 和 焦点 处 理 
。 提供 无 转换 的 浑 染 功能 ， 主 要 用 于 打印 


我 们 新 建 空 的 Qt 项 目 ， 项 目 名 称 为 graphicsview93 ， 完 成 后 添加 main.cpp 文件 ， 更 改 其 内 容 
如 下 : 


#include <QtGui> 


int main(int argc,char* argv[ ]) 


{ 
QApplication app(argc,argv); 


QGraphicsScene Scene ; 
scene.addText("Hello, world!"); 
QGraphicsView view(&scene); 
view. show!( ); 


return app.exec(); 


运行 程序 ， 效 果 如 下 : 


上 rraphicsVi-.-- 辐 回 四 





这 里 使 用 addText() 元 数 添加 了 一 个 文本 图 形 项 。 执 行 这 条 语句 就 相当 于 执行 了 下 面 两 条 语 
名 : 


QGraphicsTextIitem*item = new QGraphicsTextItem("Hello, world!"); 
scene.addItem(item); 


如 果 要 删除 一 个 图 形 项 我 们 可 以 调用 removeItem() 函数 ， 如 : scene.removeItem(item); 
(一 ) 场景 层 


一 个 场景 分 为 三 个 层 : 图 形 项 层 ( ItemLayer ) 、 前 景 层 ( ForegroundLayer ) 和 背景 层 
( BackgroundLayer ) 。 场 景 的 绘制 总 是 从 背景 层 开 始 ， 然 后 是 图 形 项 层 ， 最 后 是 前 景 层 。 看 
下 面 的 例子 : 


我 们 在 上 面 的 程序 中 添加 代码 : 


scene.setForegroundBrush(QColor(255,255,255,100)); 
scene.setBackgroundBrush(Qt::green); 


运行 程序 ， 效 果 如 下 : 
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对 于 前 景 层 ， 我 们 一 般 不 进行 设置 ， 或 者 像 上 面 这 样 设 置 为 半 透 明 的 白色 。 对 于 背景 层 ， 这 
里 设置 为 了 绿色 ， 当 然 ， 我 们 也 可 以 将 一 张 图 片 设置 为 背景 。 


scene.setBackgroundBrush(QPixmap("../graphicsView03/yafeilinux.jpg")); 


运行 程序 ， 我 们 可 以 看 到 ， 图 片 默 认 是 平 铺 的 。 





如 果 想 进一步 控制 前 景 和 背景 层 ， 我 们 可 以 重新 实现 drawForeground() 函数 
和 drawBackground() 函数 。 


(二 ) 索引 算法 
索引 算法 ， 是 指 在 场景 中 进行 图 形 项 查找 的 算法 。 Qe6raphicsscene 中 提供 了 两 种 选择 ， 它 们 


在 一 个 枚 举 变 量 QGraphicsScene: :ItemIndexMethod 中 ， 分 别 是 


e  QGraphicsSsecne;:BspTreeIndex :应 用 Binary Space Partition tree， 适 合 于 大 量 的 静态 图 


形 项 。 这 个 是 默认 值 。 
© QGraphicsScene::NoIndex : 不 用 索引 ? 搜索 场景 中 所 有 的 图 形 项 适合 于 经 常 进行 图 形 
项 的 添加 、 移 动 和 删除 等 操作 的 情况 。 


我 们 可 以 使 用 setItemIndexMethod() 函数 进行 索引 算法 的 更 改 。 
(三 ) 边界 和 矩形 


图 形 项 可 以 放 到 场景 的 任何 位 置 ， 场 景 的 大 小 默认 是 没有 限制 的 。 而 场景 的 边界 乱 形 仅 用 于 

场景 内 部 进行 索引 的 维护 。 因 为 如 果 没 有 边界 矩形 ， 场 景 就 要 搜索 所 有 的 图 形 项 ， 然 后 确定 
出 其 边界 ， 这 是 十 分 费时 的 。 所 以 如 果 要 操作 一 个 较 大 的 场景 ， 我 们 应 该 给 出 它 的 边界 矩 
形 。 设 置 边界 矩形 ， 可 以 使 用 setsceneRect() 函数 。 


(四 ) 图 形 项 查找 


场景 最 大 的 优势 之 一 就 是 可 以 快速 的 锁定 图 形 项 的 位 置 ， 即 使 有 上 百 万 个 图 形 

项 ， items() 函数 也 能 在 数 毫 秒 的 时 间 内 锁定 一 个 图 形 项 的 位 置 。 items() 函数 有 几 个 重 载 

芳 数 来 方便 的 进行 图 形 项 的 查找 。 但 是 有 时 在 场景 的 一 个 点 可 能 重 屋 着 几 个 图 形 项 ， 这 时 我 

们 可 以 使 用 itemAt() 剖 数 返回 最 上 面 的 一 个 图 形 项 。 对 于 这 些 函 数 的 使 用 ， 我 们 到 后 面 讲 视 
图 时 再 举例 讲解 。 


(五 ) 事件 处 理 和 传播 


场景 可 以 传播 来 自视 图 的 事件 ， 将 事件 传播 给 该 点 最 顶层 的 图 形 项 。 但 是 就 像 我 们 在 讲 图 形 
项 时 所 说 的 那样 ， 如 果 一 个 图 形 项 要 接收 键盘 事件 ， 那 么 它 必须 获得 焦点 。 而 且 ， 如 果 我 们 
在 场景 中 重 写 了 事件 处 理 函 数 ， 那 么 在 该 叉 数 的 最 后 ， 必 须 调 用 场景 默认 的 事件 处 理 函 数 ， 
只 有 这 样 ， 图 形 项 才能 接收 到 该 事件 。 这 一 点 我 们 也 到 后 面 讲 视图 时 再 细 讲 。 

(六 ) 打印 

该 部 分 内 容 也 放 到 后 面 和 视图 一 起 讲 。 

四 、 视 图 (QGraphicsView ) 

QGraphicsView 提供 了 视图 窗口 部 件 ， 它 使 场景 的 内 容 可 视 化 。 你 可 以 给 一 个 场景 关联 多 个 
视图 ， 从 而 给 一 个 数据 集 提供 多 个 视 口 。 视 图 部 件 是 一 个 滚动 区 域 ， 就 是 说 ， 它 可 以 提供 一 
个 滚动 条 来 显示 大 型 的 场景 。 如 果 要 使 用 DpenGL， 你 可 以 使 


用 QGraphicsView: :setViewport() 函数 来 添加 QGLWidget 。° 
(一 ) 缩放 与 旋转 


我 们 新 建 空 的 Qt 项 目 ， 项 目 名 称 为 graphicsviewg4 ， 然 后 添加 main.cpp 文件 ， 再 新 添 一 个 


C++ 类 ， 类 名 为 MyView ， 基 类 为 QGraphicsView ， 类 型 信息 选择 “继承 自 QWidget ”° 
然后 在 myview.h 中 添加 头 文件 : #include <QtGui> 


然后 声明 事件 槽 函数 : 


protected : 
void wheelEvent(QWheeleEvent “event); 
voidmousePressEvent(QMouseEvent *event); 


我 们 到 myview.cpp 文件 中 进行 函数 的 定义 : 


MyView: :MyView(QWidget *parent ) 
QGraphicsView(parent) 





{ 

resize(400,400)，; 
setBackgroundBrush(QPixmap("../graphicsView64/01.jpg"));// 其 实 就 是 设置 场景 的 背景 

QGraphicsScene *scene = new QGraphicsScene(this); 
scene->setSceneRect(0,0,200,200); 
QGraphicsRectItem *item = new QGraphicsRectIitem(0,0,20,20); 
item->setBrush(Qt::red); 
scene->addItem(item); 
setscene(scene); 

} 

void MyView: :wheelEvent(QWheelEvent*event) // 深 轮 事 件 

{ 
if(event->delta() > 0) // 如 果 鼠 标 滚轮 远 网 ， 则 delta() 返 回 正 值 

scale(0.5,0.5); // 视 图 缩放 

else scale(2,2); 

} 


void MyView: :mousePressEvent(QMouseEvent*event) 





rotate(90); // 视 图 


这 里 我 们 定义 了 鼠标 的 滚轮 事件 和 按 下 事件 ， 在 滚轮 事件 中 ， 利 用 delta() 函数 返回 值 的 正 
负 来 判断 滚轮 的 移动 方向 ， 然 后 我 们 让 视图 进行 缩 记 


最 后 到 main.cpp 文件 中 ， 更 改 其 内 容 如 下 : 


#include "myview.h" 


int main(int argc,char *argv[]) 


{ 
QApplication app(argc,argv); 
MyView *view = new MyView; 
view->show!( ); 
return app.exec(); 

} 


我 们 运行 程序 ， 效 果 如 下 : 


第 20 篇 2D 绘 图 (十 ) 图 形 视图 框架 (下 ) 
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第 20 篇 2D 绘 图 (十) 图 形 视图 框架 〈 下 ) 


四 graphicsyiev0d 画面 加 























上 面 四 幅 图 分 别 是 : 正 
是 十 分 简单 的 。 


(二 ) 场景 边框 与 场景 对 齐 方 式 


寺 


， 旋 转 90 度 后 ， 缩 小 后 ， 放 大 后 的 效果 。 可 以 看 到 实现 视图 的 变换 
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第 20 篇 2D 绘 图 (十 ) 图 形 视图 框架 (下 ) 


我 们 在 上 面 讲 场景 时 就 提 到 了 场景 边框 ( SceneRect )， 这 里 再 说 说 它 在 视图 中 的 作用 。 我 们 前 
面 说 过 ， 视 图 是 可 以 提供 滚动 条 的 ， 但 是 ， 这 只 是 在 视图 窗口 小 于 场景 时 才 自 动 出 现 的 。 如 

果 我 们 不 定义 场景 边框 ， 那 么 当场 景 中 的 图 形 项 移动 到 视图 可 视窗 口 以 外 的 地 方 时 ， 视 图 就 

会 自动 出 现 滚动 条 ， 但 是 即使 是 图 形 项 再 次 回 到 可 视 区 域 ， 滚 动 条 也 不 会 消失 。 为 了 解决 这 

个 问题 ， 我 们 可 以 为 场景 设置 边框 ， 这 样 ， 当 图 形 项 移动 到 场景 边框 以 外 时 ， 视 图 是 不 会 提 

供 额 外 的 滚动 区 域 的 。 

而 当 整 个 场景 都 可 视 时 ， 也 就 是 说 视图 没有 滚动 条 时 ， 我 们 可 以 通过 setAlignment() 鸭 数 来 

设置 场景 在 视图 中 的 对 齐 方式 ， 如 左 对 齐 Qt::ALignLeft ， 向 上 对 齐 Qt::AlignTop ， 中 心 对 

齐 Qt::Aligncenter 。 更 多 的 对 齐 方式 ， 可 以 查看 帮助 中 Qt::Alignment 关键 字 。 默 认 的 对 齐 
方式 是 Qt::Aligncenter 。 而 且 几 种 对 齐 方式 可 以 通过 “ 按 位 或 "操作 一 起 使 用 。 我 们 在 上 面 的 
程序 中 的 myitem.cpp 文件 中 的 构造 函数 最 后 添加 一 行 代码 : 


setAlignment(Qt::AlignLeft | Qt::AlignTop); 


运行 效果 如 下 图 所 示 。 
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(三 ) 拖 动 模式 
在 QGraphicView 中 提供 了 三 种 拖 动 模式 ， 分 别 是 : 


e QGraphicsView: :NoDrag : 忽略 鼠标 事件 ， 不 可 以 拖 动 。 
e  QGraphicsView::ScrollHandprag : 光标 变 为 手 型 ， 可 以 拖 动 场景 进行 移动 。 
e QGraphicsView: :RubberBandprag : 使 用 橡皮 筋 效 果 ， 进 行 区 域 选 择 ， 可 以 选中 一 个 区 域 
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第 20 篇 2D 绘 图 (十) 图 形 视图 框架 〈 下 ) 


内 的 所 有 图 形 项 。 
我 们 可 以 利用 setpragMode() 函数 进行 相应 设置 。 


下 面 我 们 更 改 上 面 的 程序 。 在 myview.cpp 中 的 构造 函数 中 的 最 后 添加 一 行 代 码 : 
setDragMode(QGraphicsView: :ScrollHandDrag);// 手 型 拖 动 
并 将 场景 外 框 放大 一 点 : 


scene->setSceneRect(0,0,800,800); 


这 时 运行 程序 ， 虽 然 出 现 了 小 手 ， 但 是 并 不 能 拖 动 场景 。 为 什么 呢 ? 我 们 
在 mousepressEvent() 元 数 中 添加 一 行 代码 : 


QGraphicsView: :mousePressEvent (event); 


这 时 再 运行 程序 ， 发 现 已 经 成 功 了 。 效 果 如 下 : 


| rraphicsyIier0d 
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我 们 在 事件 函数 的 最 后 添加 了 一 行 : Q6raphicsview: :mousepressEvent(event); 这 样 程序 才能 
执行 默认 的 事件 。 这 也 是 我 们 下 面 要 说 的 事件 传播 的 内 容 的 一 部 分 。 


(四 ) 事件 传递 
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在 上 面 我 们 看 到 必须 在 事件 函数 的 最 后 将 event 参数 传递 出 去 ， 才 能 执行 默认 的 事件 操作 。 
其 实 不 止 上 面 那 一 种 情况 ， 在 图 形 视图 框架 中 ， 和 鼠标 键盘 等 事件 是 从 视图 进入 的 ， 视 图 将 它 
们 传递 给 场景 ， 场 景 再 将 事件 传递 给 该 点 的 图 形 项 ， 如 果 该 点 有 多 个 图 形 项 ， 那 么 就 传 给 最 
上 面 的 图 形 项 。 所 以 要 想 使 这 个 事件 能 一 直 传 播 下 去 ， 我 们 就 需要 在 重新 实现 事件 处 理 函 数 
时 ， 在 其 最 后 将 event 参数 传 给 默认 的 事件 处 理 函 数 。 比 如 我 们 重 写 了 场景 的 键盘 按 下 事件 
处 理 函 数 ， 那 么 我 们 就 在 该 函数 的 最 后 写 上 Q6raphicsscene: :keyPressEvent(event); 一 行 代 

码 。 


(五 ) 背景 缓存 


如 果 场 景 的 背景 需要 大 量 耗 时 的 泻 染 ， 可 以 利用 CacheBackground 来 缓存 并 9 景 Ss 
染 背 景 时 ， 可 以 快速 进行 泻 染 。 它 的 原理 就 是 ， 把 整个 视 口 先 绘制 到 一 个 pixmap 上 。 但 是 
适合 较 小 的 视 口 ， 也 就 是 说 ， 如 果 视 图 窗口 很 大 ， 而 且 有 滚动 条 ， 那 么 就 不 再 适合 


oo 


我 们 可 以 使 用 setCcacheMode(QGraphicsView: :CacheBackground); 来 设置 背景 缓存 。 默认 


时 
景 
设置 是 没有 缓存 QGraphicsView: :CacheNone ° 


(六 ) OpenGL 泻 业 


QGraphicsView 默认 使 用 一 个 Qwidget 作为 视 口 部 件 ， 如 果 我 们 要 使 用 DpenGL 进 行 泻 染 ， 可 
以 使 用 setviewport() 函数 来 添加 一 个 QGLWidget 对 象 。 看 下 面 的 例子 


我 们 先 在 项 目 文件 graphicsview64.pro 中 加 入 


QT += opengl 


说 明 要 使 用 OpenGL 模 块 ， 然 后 在 myview.cpp 文件 中 添加 头 文件 : 


#include <QtOpenGL> 


后 在 构造 函数 中 加 入 代码 : 


QGLWidget *widget =new QGLWidget(this); 
setViewport (widget); 


这 样 便 使 用 OpenGL 进 行 演 染 了 。 关 于 OpenGL ， 我 们 在 后 面 的 3D 绘 图 部 分 再 讲 。 
(七 ) 图 形 项 查找 与 图 形 项 组 


在 前 面 讲 场景 时 ， 我 们 就 涉及 了 图 形 项 查找 的 内 容 ， 当 时 没有 细 讲 ， 现 在 我 们 把 它 和 图 形 项 
组 放 到 一 起 来 讲解 。 先 看 一 个 例子 ， 然 后 再 介绍 。 


在 myview.cpp 中 的 构造 函数 里 将 以 前 那个 item 改名 为 item1 ， 然 后 再 加 入 一 个 item2 和 一 
个 图 形 项 组 对 象 group 。 更 改 后 构造 函数 的 部 分 代码 如 下 


QGraphicsRectItem *item1 = newQGraphicsRectItem(0,0,20,20); 
item1i->setBrush(Qt::red); 

item1->setPos(10,0); 

scene->addItem(item1); 


QGraphicsRectItem *item2 = newQGraphicsRectIitem(0,0,20,20); 
item2->setBrush(Qt::green); 

item2->setPos(30,0); 

scene->addItem(item2); 


QGraphicsItemGroup *group = newQGraphicsItemGroup; // 新 建 图 形 项 组 
group->addToGroup(item1); 

group->addToGroup(item2); 

scene->addItem(group); 

SetScene(Scene ) ; 

qDebug() << "itemAt(10,0) :"”<<itemAt(10,9); // 输 出 (10,0) 点 的 图 形 项 
qDebug() << "itemAt(30,0) :" <<itemAt(30,0); 

qDebug( ) <<"############ 检 六 并 检 间 并 奉 夫 并 检 夫 并 检 间 并 奉 夫 并 检 夫 ###" ; / /分割 线 


然后 我 们 到 myview.h 文件 中 protected 下 声明 键盘 按 下 事件 槽 函数 : 


void keyPressEvent(QKeyEvent *event ) 


再 到 myview.cpp 中 定义 它 ， 如 下 : 


void MyView: :keyPressEvent(QKeyEvent*event) 





{ 
qDebug() << items(); // 输 出 场景 中 所 有 的 区 
items().at(0)->setPos(100,0); 
items().at(1)->setPos(0,100); 
QGraphicsView: :keyPressEvent(event); /7 执行 默 认 的 吉 件 处 理 


这 时 运行 程序 ， 当 按 下 键 瘟 上 任意 键 后 ， 效 果 如 下 : 


第 20 篇 2D 绘 图 (十 ) 图 形 视图 框架 (下 ) 


有 graphicsY¥iew0d 





下 面 是 输出 框 输出 的 信息 : 





人 aphlcsVlewD4 国 





Starting E: “Qt2010\eraphicsViewDd\debue\er aphicsViewOd. exe... 

itemAt (10,0) : QGraphicsItem [this = Ox9954e08 , parent = Dx9955968 , pos = QFointF (10, 0), zr =0, flags = 0) 
itemAt (30,0) : QGraphicsItem 【this = Ox9954148 , parent = Dx9955968 , pos = QFointF (30, 0), zr =0, flags = 0) 
和 

(GraphicsItem (this =0x9954148, parent =0x9955968，pos =QPointF (30, 0), z =0, flags = 0), QGraphicsItem [this 
=0x9954e08, parent =Dx9955968, pos =QPointF (10, 0), z =0, flags = 0), QGraphicsItem [this =0x9955968, parent =DxD, 
pos =QPointF (0, 0), zr =0, flags = 0)) 


可 以 看 到 ， itemAt() 驾 数 可 以 输出 场景 上 任意 点 的 图 形 项 。 而 items() 函数 可 以 输出 场景 上 
所 有 的 图 形 项 。 这 里 应 该 说 明 ， items() 函数 返回 的 图 形 项 列表 是 按 栈 的 降序 排序 的 ， 也 就 
是 说 ， items(),at(9) 返回 的 是 最 后 加 入 场景 的 图 形 项 。 从 上 面 可 以 看 出 ， 最 后 加 入 的 图 形 项 
是 item2 ， 其 实 ， 因 为 我 们 使 用 了 group ， 而 iteml 和 item2 都 在 group 里 ， 所 以 我 们 只 需 
将 group 加 入 场景 中 就 可 以 了 ， 前 面 把 iteml 和 item2 也 加 入 场景 是 多 余 的 。 我 们 可 以 

将 scene->addItem(item1); 和 scene->addItem(item2); 两 行 代码 删 掉 。 那 么 这 时 加 入 场景 的 顺 
序 就 是 ， 先 加 入 group ， 因 为 iteml 先 加 入 group ， 所 以 下 面 将 item1 加 入 场景 ， 最 后 加 入 
场景 的 是 item2 ， 这 就 是 为 什么 items.at(6) 会 是 item2 的 原因 。 

下 面 再 说 图 形 项 组 ， 其 实 图 形 项 组 也 是 一 个 图 形 项 ， 它 有 图 形 项 所 拥有 的 所 有 特性 。 其 作用 
就 是 ， 将 加 入 它 的 所 有 图 形 项 作为 一 个 整体 ， 对 这 个 图 形 项 组 进行 操作 ， 就 相当 于 对 齐 中 所 
有 图 形 项 进行 操作 。 图 形 项 组 是 加 入 它 的 所 有 图 形 项 的 父 图 形 项 ， 在 上 面 的 输出 的 parent 信 
息 中 我 们 可 以 看 到 这 一 点 。 下 面 我 们 将 程序 中 的 代码 更 改 如 下 : 
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第 20 篇 2D 绘 图 (十 ) 图 形 视图 框架 (下 ) 


void MyView: :keyPressEvent(QKeyEvent*event) 


{ 
items().at(2)->setPos(100,100); 
QGraphicsView: :keyPressEvent(event); // 执 行 默 认 的 事件 处 理 


运行 程序 ， 按 下 键盘 上 任意 键 ， 效 果 如 下 : 


| rraphicsyIier0d 





可 以 看 到 ， 两 个 图 形 项 是 同时 移动 的 。 我 们 要 从 图 形 项 组 中 移 除 一 个 图 形 项 ， 可 以 使 

用 removeFromGroup() 郊 数 ， 它 可 以 将 给 定 的 item 从 group 中 删除 ， 要 注意 这 时 item 依然 
存在 ， 它 会 回 到 group 的 父 图形 项 中 ， 如 果 group 没有 父 图 形 项 ， 那 么 item 就 会 回 到 场景 
中 。 我 们 可 以 使 用 场景 的 removeItme() 函数 来 删除 group ， 这 样 也 会 将 group 中 所 有 的 图 形 
项 从 场景 中 删除 。 还 有 一 种 办 法 是 利用 场景 的 destroyItem6roup() 函数 ， 它 会 删除 group 并 
销毁 它 ， 但 是 group 中 的 所 有 图 形 项 会 回 到 group 的 父 图 形 项 中 ， 如 果 它 没有 父 图 形 项 ， 那 
么 所 有 图 形 项 就 会 回 到 场景 中 。 


(入 ) 打印 


图 形 视 图 框架 提供 了 两 个 打印 函数 render() ， 一 个 是 在 QGraphicsscene 中 ， 一 个 是 
在 QGraphicsview 中 ， 并 且 它 们 的 函数 原型 是 一 模 一 样 的 。 不 过 它们 实现 的 效果 稍 有 不 同 。 看 
一 面 的 例子 。 


我 们 更 改 鼠 标 按 下 事件 槽 函数 的 内 容 如 下 : 
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第 20 篇 2D 绘 图 (十 ) 图 形 视图 框架 (下 ) 


void MyView: :mousePressEvent(QMouseEvent*event) 


rotate(90); // 视 图 旋转 顺 时 针 90 度 

QPixmap pixmap(400,400); ”// 必 须 指定 大 小 

QPainter painter(&pixmap); 

render(&painter, QRectF(0,09,400,400),QRect(0,0,400,400)); // 打 印 视图 指定 区 域内 容 
pixmap.save("../graphicsView04/save.png"); 

QGraphicsView: :mousePressEvent(event); 


这 里 我 们 使 用 了 视图 的 render() 函数 ， 其 中 的 QRectF 参数 是 指 设备 的 区 域 ， 这 里 是 

指 pixmap 。 而 QRect 参数 是 指 视图 上 要 打印 的 区 域 。 我 们 利用 Qpixmap 类 的 save() 函数 ， 
将 pixmap 图 片 保存 到 我 们 项 目 源码 目录 中 ， 文 件 名 为 save.png 。 下面 是 运行 程序 后 ， 点 击 
鼠标 ， 生 成 的 图 片 的 效果 : 
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第 20 篇 2D 绘 图 (十) 图 形 视图 框架 〈 下 ) 





我 们 每 点 击 一 次 鼠标 ， 就 会 旋转 视图 ， 那 么 生成 的 图 片 就 是 当前 视 口 的 截图 。 下 面 我 们 使 用 
场景 的 打印 函数 ， 将 上 面 的 打印 一 行 的 代码 改 为 : 


scene()->render (&painter,QRectF(0,0,400,400),QRect(0,0,400,400));// 打 印 场景 内 容 


查看 图 片 效果 : 
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这 时 无 论 视图 怎样 变换 ， 生 成 的 图 片 总 是 一 样 的 。 而 且 它 并 没有 打印 场景 背景 的 图 片 。 就 像 
我 们 看 到 的 ， 视 图 的 打印 函数 是 依据 视图 的 坐标 系 进行 打印 的 ， 我 们 看 到 的 就 是 打印 出 来 后 
的 效果 ， 它 可 以 看 做 是 程序 窗口 的 截屏 。 而 场景 的 打印 通 数 ， 是 依据 场景 的 坐标 系 的 ， 无 论 
视图 怎么 转换 ， 只 要 场景 坐标 系 没有 变换 ， 它 打印 出 来 的 图 片 都 是 一 样 的 。 


图 形 视图 框架 是 一 个 非常 强大 而 且 庞杂 的 系统 ， 我 们 教程 中 也 只 是 很 笼统 的 介绍 了 一 些 最 基 
本 最 常用 的 内 容 。 如 果 大 家 想 系统 学 习 该 部 分 知识 ， 想 学 习 如 何 使 用 该 框架 轻松 搭建 一 个 游 
戏 ， 可 以 参考 《Qt Creator 快 速 入 门 》 的 第 11 章 ， 以 及 《Qt 及 Qt Quick 开 发 实战 精 解 》 的 第 二 


- 立 - 


时 0° 
涉及 到 的 源码 : 


。 graphicsView03.zip 
e graphicsView04.zip 


数据 篇 


第 21 篇 数据 库 〈 一 ) Qt 数据 库 应 用 简介 


导语 下 面 十 节 讲 解数 据 库 和 XML 的 相关 内 容 。 在 学 习 数 据 库 相 关内 容 前 ， 建 议 大 家 掌握 一 些 
基本 的 SQL 知识 ， 应 该 可 以 看 懂 基 本 的 SELECT、INSERT 、UPDATE 和 和 DELETE 等 语 甸 ， 
为 在 这 几 篇 教程 中 使 用 的 都 是 非常 简单 的 操作 ， 所 以 即便 没有 数据 库 的 专业 知识 也 可 以 看 

懂 ! 


环境 : Windows Xp + Qt 4.8.4+Qt Creator2.6.2 

目录 一 、 数 据 库 简介 二 、 数 据 库 驱动 三 、 简 单 的 数据 库 应 用 
正文 

一 、 数 据 库 简介 


Qt 中 的 Qtsql 模块 提供 了 对 数据 库 的 支持 ， 该 模块 中 的 众多 类 基本 上 可 以 分 为 三 层 ， 如 下 图 
所 示 。 


QtSql 模块 的 类 分 层 


QSaqlDatabase. QSqlQuery. QSqlError. QSqlField. QSqlIindex 和 QSqlRecord 





QSqlDriver.、 QSqlDriverCreator<T>、 QSqlDriverCreatorBase. QSqlDriverPlugm 和 QSqlResult 


其 中 驱动 层 为 具体 的 数据 库 和 SQL 接 口 层 之 间 提 供 了 底层 的 桥梁 ; SQL 接 口 层 提供 了 对 数据 
库 的 访问 ， 其 中 的 Qsqlpatabase 类 用 来 创建 连接 ， QsqlQuery 类 可 以 使 用 SQL 语 名 来 实现 与 
数据 库 交 互 ， 其 他 几 个 类 对 该 层 提供 了 支持 ; 用 户 接 口 层 的 几 个 类 实现 了 将 数据 库 中 的 数据 
链接 到 窗口 部 件 上 ， 这 些 类 是 使 用 前 一 章 的 模型 /视图 框架 实现 的 ， 它 们 是 更 高 层次 的 抽象 ， 
即便 不 熟悉 SQL 也 可 以 操作 数据 库 。 如 果 要 使 用 QtQql 模块 中 的 这 些 类 ， 需 要 在 项 目 文件 

(.pro 文 件 ) 中 添加 QT += sql 这 一 行 代码 。 对 应 数据 库 部 分 的 内 容 ， 大 家 可 以 在 帮助 中 查看 
SQL Programming 关 键 字 。 


二 、 数 据 库 驱动 


Qtsql 模块 使 用 数据 库 驱 动 来 和 不 同 的 数据 库 接 口 进行 通信 。 由 于 Qt 的 SQL 模型 的 接口 是 独 
立 于 数据 库 的 ， 所 以 所 有 数据 库 特 定 的 代码 都 包含 在 了 这 些 驱动 中 。Qt 现 在 支持 的 数据 库 驱 
动 如 下 图 所 示 。 


Driver Type Description 


QDB2 IBNM DB2 
QIBASE Borland InterBase Driver 
QMYSQL MySQL Driver 


Oracle Call Interface Driver 

ODBC Driver (includes Microsoft SQL Server) 
PostgreSQL Driver 

SQLite version 3 or above 


SQLite version 2 





Sybase Adaptive Server 


需要 说 明 的 是 ， 由 于 GPL 许 可 证 的 兼容 性 问题 ， 并 不 是 这 里 列 出 的 所 有 了 驱动 插件 都 提供 给 了 
Qt 的 开源 版 本 。 下 面 我 们 通过 程序 来 查看 一 下 现在 版 本 的 Qt 中 可 用 的 数据 库 插件 。 


1 新 建 Qt 控制 台 应 用 ， 名 称 为 sqldrivers 。 


2 完成 后 将 sqldrivers.pro 项 目 文件 中 第 一 行 代码 更 改 为 : 


QT += core sql 


表明 使 用 了 sql 模块 ， 然 后 按 下 ctrl + s 快捷 键 保存 该 文件 。 


3 将 main,cpp 文件 的 内 容 更 改 如 下 : 


#include <QCoreApplication> 

#include <QSqlDatabase> 

#include <QDebug> 

#include <QStringList> 

ne mann(ant arge > char Sargyv Dl) 

{ 
QCoreApplication a(argc, argv); 
qDebug() << "Available drivers:"; 
QStringList drivers = QSqlDatabase: :drivers(); 
foreach(QString driver, drivers) 

qDebug() << driver; 

returm arvexecl(), 


这 里 先 使 用 drivers() 函数 获取 了 现在 可 用 的 数据 库 驱 动 ， 然 后 分 别 进 行 了 输出 。 运 行程 
序 ， 结 果 如 下 图 所 示 。 


c* C:\Qt\gtcreator-2.6.2\bin\gtcreator process stu... 


有 uailapble drivers: 
"QSQLITE" 
"QODBC3" 

"QODBG" 








可 以 发 现 ， 现 在 只 支持 三 个 数据 库 。 这 里 要 重点 提 一 下 SQLite 数 据 库 ， 它 是 一 款 轻 型 的 文件 
型 数据 库 ， 主 要 应 用 于 胡 入 式 领 域 ， 支 持 跨 平 台 ， 而 且 Qt 对 它 提供 了 很 好 的 默认 支持 ， 所 以 
在 本 章 后 面 的 内 容 中 ， 我 们 将 使 用 该 数据 库 作 为 例子 来 进行 讲解 。 


三 、 简 单 的 数据 库 应 用 


下 面 使 用 QSLite 数 据 库 来 进行 一 个 简单 的 演示 ， 创 建 一 个 数据 库 表 ， 然 后 查找 其 中 的 数据 并 
进行 输出 。 我 们 更 改 main.cpp 文件 的 内 容 如 下 : 


#include <QCoreApplication> 
#include <QSqlDatabase> 
#include <QDebug> 

#include <QSqlQuery> 


nemarm( nt argqe cnare argvll) 


{ 
QCoreApplication atargc argv); 
// 添 加 数据 库 驱 动 
QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE"); 
// 设 置 数据 库 名 称 
db.setDatabaseName(":memory:"); 
// 打 开 数 据 库 
if(!db.open()) 
{ 
retupsn ialse, 
} 
// 以 下 执行 相关 Sql 语句 
QSqlQuery query; 
// 新 建 student 表 ，id 设 置 为 主键 ， 还 有 一 个 name 项 
query“exec( create table® student(id int primary key.name varchar)  ) 
// 向 表 中 插入 3 条 记录 
query.exec("insert into student Values(1，'Xxiaogang ' )”) ; 
query“exec( "insert nto student Values(2 XIaomzng yy) )F 
query.exec("insert into student values(3,'xiaohong')"); 
// 查 找 表 中 id >=2 的 记录 的 id 项 和 name 项 的 值 
query“exec( select id name from student where 10 >=°%2 ); 
//qduery.next() 指 向 查找 到 的 第 一 条 记录 ， 然 后 每 次 后 移 一 条 记录 
while(query.next()) 
//qduery.value(0) 是 id 的 值 ， 将 其 转换 为 int 型 
Int Value0 = query.value(0).toInt(); 
QString value1 = query.value(1).toSstring(); 
// 输 出 两 个 值 
qDebug() << Value0 << Valuel :; 
returm asexec(), 
} 


这 里 使 用 了 SQLite 数 据 库 ， 数 据 库 名 为 :memory: 表示 这 是 建立 在 内 存 中 的 数据 库 ， 也 就 是 说 
ee 
文件 路 径 。 程 序 中 使 用 到 的 QsqlQuery 类 ， 将 在 后 面 的 内 容 中 讲 到 。 运 行 ， 结 果 如 下 图 
所 示 。 


cc C:\Qt\gtcreator—-2.6.2\bin\gtcreator process --- 


2 "xiaoming"’ 
3 "xiaohong" 








本 节 简 单 介绍 了 一 下 Qt 中 数据 库 相关 的 内 容 ， 可 以 看 到 ， 现 在 Qt 支持 的 数据 库 仅 有 两 类 。 如 
何 才能 让 Qt 支持 其 他 的 数据 库 呢 ， 下 一 节 ， 我 们 将 以 现在 广 为 使 用 的 MySq| 为 例 ， 讲 解数 据 库 
驱动 的 编译 。 如 果 大 家 想 系统 的 学 习 Qt 数 据 库 部 分 内 容 ， 可 以 参考 《Qt Creator 快 速 入 门 》 的 
第 17 章 。 


涉及 到 的 源码 


第 22 篇 数据 库 〈 二 ) 编译 MySQL 数 据 库 驱动 
导语 


在 上 一 节 的 末尾 我 们 已 经 看 到 ， 现 在 可 用 的 数据 库 驱 动 只 有 两 类 3 种 ， 那 么 怎样 使 用 其 他 的 数 
据 库 呢 ?在 Qt 中 ， 我 们 需要 自己 编译 其 他 数据 库 驱 动 的 源码 ， 然 后 当做 插件 来 使 用 。 下 面 就 
以 现在 比较 流行 的 MySQL 数 据 库 为 例 ， 说 明 一 下 怎样 在 QtCreator 中 编译 数据 库 驱 动 。 


环境 : Windows Xp + Qt 4.8.4+Qt Creator2.6.2 


目 系 


。 一 、 查 看 怎样 编译 数据 库 驱 动 
。 二、 下 载 MySQL 

。 三 、 安 装 MySQL 

、 在 MySQL 中 创建 数据 库 
编译 MySQL 了 驱动 

测试 MySQL 程 序 


及 日 


@ 

~ 

六 
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正文 
一 、 查 看 怎样 编译 数据 库 驱 动 


1 在 Qt Creator 的 帮助 模式 索引 SQL Database Drivers 关 键 字 ， 这 篇 文档 里 详细 介绍 了 Qt 数 
据 库 的 相关 内 容 。 


2 我 们 在 文档 中 定位 到 How to Build the QMYSQL Plugin on Windows 一 段 ， 这 里 讲解 了 怎 
样 在 Windows 下 编译 MySQL 了 驱动 。 如 下 图 所 示 。 
How to Build the QMY SQL Plugin on Windows 


You need to get the MySQL installation files. Run SETUP.EXE and choose "Custom Install” Install the "Libs 
Include Files" Module. Build the plugin as follows (here it is assumed that MySQL is installed in C: \MySQL) 


cd S$QTDIRS\src\plugins\sgqldrivers\mysql 
gmake "INCLUDEPATH+=C:\MySQL\include™”" "LIBS+=C:\MYSQL\MySQL Server <version>\lib\opt\libmysgl.1ib" 
nmake 


If you are not using a Microsoft compiler replace nmake With make in the line above 
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可 以 看 到 ， 主 要 分 为 两 步 ， 首 先 下 载 并 安装 MySQL， 在 安装 时 要 使 用 Custom Install 定 制 安 
装 ， 安 装 上 库 Libs 和 头 文件 Include Files ; 然后 是 编译 ， 注 意 在 编译 驱动 前 先 添加 上 MySQL 的 
库 和 头 文件 。 

二 、 下 载 MySQL 

1: 我 们 先进 入 MySQL 的 主页 http://www.mysql.com/ ， 然 后 点 击 左上 角 的 Downloads， 如 下 
图 所 示 。 


\ 
MysGE 


The world's most popular open source database 


MySQL.com Downioads CCA 





EE MysQL Downloads 





ntact Sales MySQL Enterprise Edition (comr 
A: +1-866-221-0634 MySQL Enterprise Edition includes the mo 
nada: +1-866-221-0634 MySQL. 


2 然后 进入 该 页 面 最 下 面 的 MySQL Community Edition(GPL) 链 接 ， 我 们 使 用 遵循 GPL 协议 
的 开源 版 本 。 如 下 图 所 示 。 


MySQL Community Edition (GpL) 


Download from MySQL Developer Zone » 


3 在 新 的 页 面 我 们 选择 左上 角 Downloads 按 钮 下 面 的 Archives 选 项 ， 从 档案 中 下 载 。 如 下 图 
所 示 。 


MySQL. 


Developer Zone 


The world's most 





Archives 


A 
4 在 这 个 页 面 我 们 选择 现在 最 新 的 MySQLDatabase Server 5.6 版 本 。 如 下 图 所 示 。 
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I 


oO MySQL Server versions before MySQL 5. 
Updates 


* MySQL Database Server 5.6 
* MySQL Database Server 5.5 
» MySQL Database Server 5.1 


RMN Ma Tan En 


5 :下面 我 们 选择 按照 平台 分 类 里 的 MicrosoftWindows (34 files)。 如 下 图 所 示 。 


Software Downloads by Platform 

» Source and other files (98 files) 

» Linux (4 files) 

SUSE Linux Enterprise Server 10 RPM (67 files) 

» SUSE Linux Enterprise Server 11 RPM (100 files) 

» Red Hat Enterprise Linux 4 RPM (67 files) 

» Red Hat Enterprise Linux 5 RPM (142 files) 

* Red Hat/Oracle Enterprise Linux 6 RPM (105 files) 
» Generic Linux RPM (142 files) 


» Windows (34 和 es) 
» MacOSX(66 files) 

» Sun Solaris (88 files) 

» FreeBSD (21 files) 





6 : 这 里 我 们 下 载 最 新 版 本 的 第 二 个 链接 MicrosoftWindows 32. (Windows Installer format) (1 
Feb 2013, 35.5M)， 如 下 图 所 示 。 


Microsoft Windows 


53.6.10 


Microsoft Windows 32. {ZIP format) (23 Jan 2013, 207.3M) 
Signature MD5; a8f720b353f8848eeT8b49338eacf9le 


Microsoft Windows 32. (Windows Installer format) (1 Feb 2013, 35.5M) 
Signature MDS5: Tb76602cdf68c2267Tblf29gc6a516e58 


Microsoft Windows (Windows Installer format) (1 Feb 2013, 37.6M) 
Signature MDS5: 84cc810331ebf473182a24d736986£87 


7 下 载 后 的 最 终 文件 为 : mysql-5.6.10-win32 (大 家 也 可 以 下 载 我 们 上 传 到 网 上 的 软件 包 ， 
因为 下 面 的 操作 只 需要 MyQSL 的 库 、 头 文件 以 及 最 基本 的 功能 ， 所 以 我 们 下 载 了 该 版 本 ) 
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疝 下 759L Server 5.6 Setup 


Welcome to the MySQL Server 5.6 Setup 
Wizard 


The Setup Wizard will install MySQL Server 5,6 on your 
computer, Click Next to continue or Cancel to exit the Setup 
Wizard, 


Copyright (c) 2000, 2012, Orade and/or its affiliates, All 
rights reserved， 


疗 y5QL Server 5.6 Setup 


End-User License Agreement 


Please read the following license agreement carefully 





GNU GENERAL EPUBLIC LICENSE 
Version 2, June 1991 


Copyright {C} 19869, 1991 Free Software Foundation, Inc., 

51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 
Everyone is permitted to copy and distribute verbatim copies 
of this license document, but changing it is not allowed. 


Preamblie 


The licenses for most softvware are designed to take away your 
freedom to share and change it. By contrast, the GNU General SublIic 
License 3s intended to guarantee your freedom to share and change 
free 
softwvare--to make sure the software is free for all its users. This 后 | 





3 . 接着 Next， 下 面 我 们 选择 定制 安装 Custom。 如 下 图 所 示 。 
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NyS5QL Server 5.6 Setup 


Choose Setup Type 
Choose the setup type that best suits your needs 





Installs the most common program features, Recommended for most users, 


Allows users to choose which program features will be installed and where 
they will be installed, Recommended for advanced users， 


All program features will be installed, Reguires the most disk space. 








4 .这 里 需要 安装 所 有 的 头 文件 和 库 ， 点 击 Development Components 前 面 的 下 拉 箭 头 ， 然 后 
选择 第 二 项 。 如 下 图 所 示 。 大 家 也 可 以 看 下 右边 的 说 明 。 


六 FS9L Server 5.6 Setup 


Custom Setup 
select the way you want features to be installed, 





Click the icons in the tree below to change the way features will be installed. 





Installs C/C++ header files and 
libraries 








Feature will be installed when required 





Entire feature will be unavailable 








5 . 然后 选择 下 面 的 Browse... 来 更 改 安装 路 径 ， 这 里 设置 为 c:\MysQL\、， 如 下 图 所 示 。 
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Change destination folder 
Browse to the destination folder 





Look in: L EE MySQL Server 5,6 




















Folder name: 


|c:wvseul 








6 填写 完 路 径 后 点 击 Ok 回 到 主页 面 ， 点 击 Next 来 到 新 的 页 面 ， 这 里 选择 Install 来 进行 安装 。 
如 下 图 所 示 。 


出 7SQL Server 5.6 Setup 


Ready to install MySQL Server 5.6 


Click Install to begin the installation. Click Back to review or change any of your 
installation settings, Click Cancel to exit the wizard, 








7 等 安装 完毕 后 ， 点 击 Finish 完 成 安装 。 如 下 图 所 示 。 
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名 SQL Server 5.6 Setup 


Completed the MySQL Server 5.6 Setup 
Wizard 


Click the Finish button to exit the Setup Wizard， 





四 、 在 MySQL 中 创建 数据 库 


1 下面 我 们 先 在 安装 的 MySQL 中 创建 一 个 数据 库 ， 用 于 后 面 的 测试 。 首 先 到 MyQSL 的 安装 
目录 Cc:\MysQL\bin 目录 下 运行 mysqld.exe 程序 ， 该 程序 运行 完成 后 会 自动 关闭 。 如 下 图 所 
示 。 


净 件 让】 ”编辑 多) 查看 如 ”收藏 入 工具 CI) 才 助 人 0 | 


@Aia- 日 人 访 记 昧 入 芒 蕊 xHx 国 - 


地 址 0D) DD Cc: WysgL\bin 


立 件 和 交 件 夹 在 务 Y [| mysqlbinlog [| mysqlcheck 


人 
mysqld multi 
28 三 





mysql dumpslow 
[| mysql dump PE 等 储 
8 区 


mysqlhotcopy 
FL 艾 件 


mysqlimport 
36 EB 


mysqlshow mysqlslap 





交 件 版 本 : 5.6. 10.0 创建 日 期 : 2013-2-1 15:18 大 小 : 10.4 NB 10.4IB ” | 音 我 的 电脑 
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2 . 在 Windows 开 始 中 点 击 “ 运 行 "， 然 后 输入 cmd ， 进 入 终端 后 我 们 输入 下 面 的 命令 : 


cd C:\MySQL\bin 


跳 转 到 安装 目录 下 。 如 下 图 所 示 。 


GCG:\Documents and Settings Mdministrator2cd CG: ‘MySQL\bin 





3 . 然后 输入 下 面 的 命令 : 


mysql -uroot -p 


我 们 使 用 root 用 户 来 登陆 MySQL， 因 为 默认 密码 是 空 的 ， 所 以 这 里 不 用 设置 密码 。 运 行 这 行 
代码 会 提示 Enterpassword， 我 们 这 时 项 回 车 即 可 。 如 下 图 所 示 。 


Microsoft Windows XP [版 本 5.1.260061] 
CC》 版 权 打 有 14985-2861 Microsoft Corp. 


:Documents and Settings\nhdministhatok>cdu C:\MuSaL、\hbin 


CCx\MuseGL、\hbin>musdadl -uhoot -—p 
Enter password: 。 





4 .登录 MySQL 以 后 ， 我 们 使 用 下 面 的 命令 来 查看 现 有 的 数据 库 : 


Show databases : 


注意 后 面 有 个 分 号 。 如 下 图 所 示 。 


cq C:\WINDOYS\systen32\cad. exe 一 m7sgl 一 root 一 pD 
icrosoft Windows 8XP [版 本 5-1.2699] 
CC》 版 槐 有 所 有 1985-28@1 Microsoft Corp. 


:Documents and Settings Mdministrator>?cd GCG: ‘MySQL\bin 


:MySQL\bin>mysgql -uroot -—p 
Enter password: 
Jelcome to the MySQL monitor. Commands end with ; or \g. 
ou MySQL connection id is 1 
Server version: 5.6.18 MySQL Community Server CGPL> 


opyright Cc> 20006,. 20613,. Oracle and/or its affiliates. fll rights reserved. 
Oracle is a registered trademark of Oracle Corporation and/or its 
affiliates. Other names may be trademarks of their respective 


IDWneksS . 


ype '’help;’ or ’'\h’ for help. Type "cc to clear the current input statemen 


mysql> Show databases; 


可 以 看 到 ， 这 里 现在 已 经 有 几 个 数据 库 了 ， 他 们 是 MySQL 需 要 的 。 如 下 图 所 示 。 


G:\MyuSQL\bin>mysgql -uroot 一 pp 
Enter password: 
Jelcome to the MySQL monitor. Commands end with ; or \g. 
Nour MySQL connection id is 2 
erver version: 5.6.18 MySQL Community Server 《GPL> 


opyright 《c> 2006,. 2013,. Oracle and/or its affiliates. All rights reserved. 
Oracle is aa hegqgisteked thkademakhk of DOracle Cokhpokation andor Its 
ffiliates. Other names mavyv be trademarks of their respective 


DWnekFs . 


ype ’help;’ or ’'\h’ for help. Type ’c’ to clear the current input statement. 


Imysql> Show databases 





Database 





information_schema 
mysql 
performance_schema 





3 
#1 
| 
到 
' 
' 
' 
' 
: 
二 


rows in set 《909.069 sec> 


ysoql> 
5. 我们 不 使 用 已 经 有 的 数据 库 ， 而 是 新 建 自己 的 数据 库 ， 下 面 新 建 名 为 mydata 的 数据 库 : 


create database mydata ; 





如 下 图 所 示 。 

cq C:\WINDOYS\systen32\cad. exe 一 m7sgl 一 root 一 pD 

opyright “c> 20006. 2013,. Oracle and/or its affiliates- fll rights reserved. 
Oracle is a registered trademark of OQracle Corporation and/or its 
affiliates. Other names may be trademarks of their respective 

OWNEerS - 


ype '’help;’ or ’'\h’ for help. Type ’'\c’ to clear the current input statement. 


ysql> Show databases 





Database 





information_schema 
mysql 


到 
4 
! 
和 
和 
performance_schema ! 


中 mm mm mm 中 mm 中 





二 


rows in set 《0.099 sec> 


mysql> create database mvydata; 
Query OK 1 row affected 0@.00 


6 我 们 再 次 查看 已 经 存在 的 数据 库 ， 发 现 显示 出 了 刚才 创建 的 数据 库 ， 如 下 图 所 示 。 


c\ C:\WINDOYS\systen32\cad. exe 一 m7sgl 一 root 一 pD 


ysql> show databases 





Database 





infokmation_schema 
muysd1 
performance_schema 


3 
1 
' 
' 
至 
E 
' 
' 
NE 
E 
' 


中 mm mm mm 中 mm 中 





至 


rows in set 《9.0909 sec> 


mysoql> create database mydatas; 
Query OR, 1 row affected @.00 sec> 


mysoql> Show databases 





Database 





information_schema 
mydata 

mysql 
performance_schema 


“=m 中 == 中 


7 完成 后 ， 可 以 输入 exit 退出 MySQL 。 
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这 里 只 是 简单 介绍 了 一 下 在 MySQL 中 创建 数据 库 的 基本 步骤 ， 如 果 大 家 想 学 习 更 多 的 MySQL 
的 使 用 ， 请 参考 其 他 资料 。 


五 、 编 译 MySQL 了 驱动 


1 我 们 进入 Qt 安装 目录 的 mysql 源 码 目录 中 ， 有 具体 路 径 为 《这 里 Qt 人 安装 在 了 C 瘟 ) 


C:\Qt\4.8.4\src\plugins\sqldrivers\mysql 


如 下 图 所 示 。 


|X| 
文件 下 ) 编辑 区) ”查看 他 ) ”收藏 入 工具 让) 帮助 如 诸 


@ 纪 :日 :让 1 壕 访 蕊 及 间 天 国 -| 卫 


回 cat\d.8. 4\sre\plugins\sql drivers\mysql v| 转 到 


~ 3 
文件 和 交 件 夹 在 荔 \% 已 十 十 Ch Source file pro QU Broject file 
3 三 1 到 
@ READNE 
[fm sqldrivers 文件 


各 我 的 文档 
站 共享 文档 
时 我 的 电脑 
她 网 上 邻居 











时 我 的 电脑 


2 我 们 使 用 Qt Creator 打 开 里 面 的 mysql.pro 项 目 文件 。 然 后 打开 mysql.pro 文件 ， 在 最 下 
面 添加 下 面 两 行 代码 : 


INCLUDEPATH += C:/MySQL/include/ 
LIBS+= -LC:/MySQL/1ib/ -llibmysql 


这 样 便 包含 了 MySQL 的 库 和 头 文件 。 如 下 图 所 示 。 
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二 mysql. pro 





Sm sysql 1 TARGET = asalmysal 
区 mysql. pro 2 
es es 3 SOURCES = main.cpp 
qs9l_mysql g EF 
.On idl dire 4 include(../../../sql/drivers/mysql/qsq 
由 [Mot] qt_targets 要 
由 -BG 源 文件 6 incliude(../gqsqldriverbase.pri) 
7 
8 INCLUDEPATH += C:/MySQL/include/ 
9 
10 LIBS+= -LC:/MySQL/1ib/ -llibmysql 
dh 


3 现在 我 们 使 用 左下 角 的 锤子 2 按钮 来 构建 项 目 。 默 认 构 建 的 是 Debug 版 本 ， 会 在 
Qt 目录 的 mysql 目 录 的 同 层 目 录 里 面 生 成 构建 目录 ， 如 下 图 所 示 。 


sgqldrivers 


净 件 企 )】 编辑 下) 查看 如 ”收藏 入 ) 工具 (I) 和 帮助 0) 


@aa- 日 让 记 皮 廊 全 辽 xix 国 -| 区 加 


地 址 @@} 园 c:\gt\4.8. 4d\src\plugins\sgql drivers 








交 件 和 立 件 夹 芷 分 yd 


人 


[| plueins 
加 我 的 文档 


已 共享 文档 
量 我 的 电脑 
她 网 上 邻居 


sqlite 


sqlite2 sqlite_symbian 


选 定 1 个 对 象 





里 面 的 debug 目 录 里 有 我 们 需要 的 qsqlmysqld4.dl1 和 1libqsqlmysqld4.a 文件 ， 不 过 它们 只 用 
于 开发 Debug 版 本 的 MySQL 程 序 。 如 下 图 所 示 。 
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文件 区) 编辑 于) 查看 如 ”收藏 史 工具 他 ) 帮助 


四 请.- 团 - 让 万 入 记 臣 辽 间 天国 :区 办 





地 址 钾 ) 辐 CQtvd4.8.4srepluginsvsqldriversbuild-mysql- 点 面 -Debugvdebug 





br 


ss ; 
文件 和 文件 夹 任 盆 y A 0 这 全 


加 re 点 面 


-Debue 


C++ 


moc_qsql_mysql 
ee | Sour ce file 


maoe cqsql _mysql.o 
0 次 伴 
158 到 


加 我 的 文档 一 qsal 了 一 moe qsql_mysql. o 

2 3 了 449 到 

显 我 的 电脑 

be 网 上 邻居 qsqlmysqld4. dl 
4.8.4.0 


++ et 1 王 


~ sn sqld resou. 
让 


描述 : C++ application development framework. 公司 : Digia Fle and/c 948 TE 时 我 的 电脑 





4 :为 了 生成 release 库 ， 我 们 在 Qt Creator 中 运行 按钮 那里 设置 为 编译 Release 版 本 。 如 下 图 





5 下 面 再 次 按 下 锤子 按钮 来 编译 项 目 ， 就 会 生成 build- mysq1L- 桌 面 -Release 样式 的 构建 目录 ， 
里 面包 含 了 发 布 release 版 本 程序 需要 的 dl 文件 qsqlmysq14.dll 。 


6 : 我 们 将 生成 
的 qsqlmysql4.dll ， libqsqlmysql4.a ， 有 dll ， 1libqsqlmysqld4.a 都 复制 
到 Cc:\Qt\4.8.4\plugins\sqldrivers 目录 下 ， 这 是 数据 库 驱动 插件 放置 的 目录 。 如 下 图 所 示 。 
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师 sqldrivers 


文件 正 ) ”编辑 正 ) 查看 如 收藏 和 工具 I) 帮助 d) 


@ 上 三 友 © 店 站 扩 站 区 内 文 H 天 加 ; 


地 址 凹 ) Bc:\gt\d. 3. 4plugins\sqldrivers 


文件 和 文件 志 妊 笋 ¥) 加 党 a a i 了 oo 站 


3 玛 3 到 


人 入 
md a 所 q5qlite4. dl qsqlited4. dl 
A 文件 4.8.4.0 4.8.4.0 
5 a oe 
DB Plueins 3 廿 C++ application ,.. [C++ application ,. 
各 我 的 文档 








[| 共享 立 挡 二 da dl 村 dl qsqlodbecd4. 1 
> 4.8.4 4.8.4. 4.8.4.0 
时 我 的 电脑 BF ti C++ ee a [C++ application ,,, 


好 网上 邻居 . 
qsqlmysqld4. dl libgqsqlmysqld4. a Libgsalnysal4. EE 
兴 4.8.4.0 A 立 件 文件 
C++ application ... 3 三 3 玛 
3 -i 


12 个 对 象 





六 、 测 试 MySQL 程 序 


1 新 建 Qt 控制 台 应 用 ， 名 称 为 sqldriver S。 完 成 后 在 pro 文件 中 更 改 如 下 : 


QT += Core sql 


2 :更改 main.cpp 文件 内 容 如 下 。 


201 


#include <QCoreApplication> 
#include <QSqlDatabase> 
#include <QDebug> 

#include <QStringList> 
#include <QSqlQuery> 


int main(int argc, char *argv[]) 


{ 


QCoreApplication a(argc, argv); 


// 输出 可 用 数据 库 
qDebug() << "Available drivers:"; 
QStringList drivers = QSqlDatabase: :drivers(); 
foreach(QString driver, drivers) 
qDebug() << driver; 


// 打开 MySQL 
QSqlDatabase db = QSqlDatabase::addDatabase("QMYSQL"); 
db.setHostName("localhost"),; 
db.setDatabaseName("mydata"); 
db.setUserName("root"); 
db.setPassword("™"); 
if (!db.open()) 

qDebug() << "Failed to connect to root mysql admin"; 
else qDebug() << "open"; 


QSqlQuery query(db); 





// 注 意 这 里 varchar 一 定 要 指定 长 度 ， 不 然 会 出 错 
query.exec("create table student(id int primary key,name varchar(20))"); 


query“exec( insert into student values(L. sxXraogang ) 
query.exec("insert into student values(2,'xiaoming')"); 
query exec( insert into studenmnt values(S xiaohong ) 
query“exec( Select id name from student where Td >=—°2); 
while(query.next()) 

Int Value0 = query.value(0).toInt(); 


QString value1 = query.value(1).toSstring(); 
qDebug() << value0 << Valuel ，; 


} 


returnm avexXec(), 


这 里 注意 ， 创 建 表 时 varchar 一 定 要 指定 长 度 。 现 在 运行 程序 ， 会 出 现 如 下 图 所 示 的 结果 : 


c\ C:\Qt\Qt5.0.2\Tools\QtCreator\bin\gtcreator process stub. exe -iolx| | 


Available drivers: 


QasqlDatabase: QMYSQL driver not loaded 

QSsoqlDatabase: available drivers: QSQLITE QMYSQL3 QMYSQL QODBC3 QODBG 
| 

QSoqlQuery: :exec: database not open 

QSsoqlQuery: :exec: database not open 

QSoqlQuery: :exec: database not open 

QSoqlQuery: :exec: database not open 

QSoqlQuery: :exec: database not open 


这 里 提示 MySQL 了 驱动 没有 加 载 。 


3 我 们 到 c:\MysQL\1lib 中 将 libmysql.d1l 文件 复制 到 c:\Qt\4.8.4\bin 中 ， 然 后 再 ; 
序 ， 发 现 已 经 成 功 了 ， 如 下 图 所 示 。 


c* C:\Qt\Qt5.0.2\Tools\QitCreator\bin\gtcreator process_ stub. exe 


Available drivers: 


xiaoming"’ 
”xiaohong” 





在 Qt 中 编译 MySQL 数 据 库 驱动 的 内 容 到 这 里 就 介绍 完了 。 从 下 一 篇 开始 ， 我 们 将 以 SQLite 数 


据 库 为 范例 来 讲解 Qt 数据 库 部 分 的 应 用 。 


涉及 到 的 代码 


第 23 篇 数据 库 (三 ) 利用 QSqlQuery 类 执行 SQL 


语 各 


导语 


SQL 即 结构 化 查询 语言 ， 是 关系 数据 库 的 标准 语言 。 前 面 两 节 中 已 经 在 Qt 里 利 

用 QsqlQuery 类 执行 了 SQL 语句 ， 这 一 节 我 们 将 详细 讲解 该 类 的 使 用 。 需 要 说 明 ， 因 为 我 们 
重 在 讲解 Qt 中 的 数据 库 使 用 ， 而 非 专业 的 讲解 数据 库 知识 ， 所 以 不 会 对 数据 库 中 的 一 些 知 识 
进行 深入 讲解 。 


环境 : Windows Xp + Qt 4.8.4+Qt Creator2.6.2 


目 系 


。 一 、 创 建 数据 库 连 接 

二 、 操 作 结 果 集 

e 三 、 在 SQL 语 名 中 使 用 变量 
e 四 、 批 处 理 操作 

。 五 、 事 务 操作 


正文 
一 、 创 建 数据 库 连接 


前 面 我 们 是 在 主子 数 中 创建 数据 库 连 接 ， 然 后 打开 并 使 用 。 实 际 中 为 了 明了 方便 ， 一 般 将 数 
据 库 连接 单独 放 在 一 个 头 文件 中 。 下 面 来 看 一 个 例子 。 


1 新 建 Qt Gui 应 用 ， 项 目 名 称 为 myquery ， 基 类 为 QMainwindow ， 类 名 为 Mainwindow 。 完 成 
后 打开 myquery.pro 并 将 第 一 行 代码 更 改 为 : 


QT += Coregui sql 


然后 保存 该 文件 。 
2 向 项 目 中 添加 新 的 C++ 头 文件 ， 名 称 为 connection. h， 然后 打开 该 文件 ， 更 改 如 下 : 


#ifndef CONNECTION_H 
#define CONNECTION_H 
#include <QMessageBox> 
#include <QSqlDatabase> 
#include <QSqlQuery> 
statrec doolNMereateCconnectLionm() 
{ 
QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE"); 
db.setDatabaseName(":memory:"); 
If (!db.open()) { 
QMessageBox: :critical(0, gqApp->tr("Cannot open database"), 
qApp->tr("Unable to establisha database connection." 
), QMessageBox: :Cancel); 
neturn false,; 
} 
QSqlQuery query; 
query.exec("create table student (id int primary key, 
"name varchar(20))"); 
querysexec( insert intoW student values(QO, first ) ),; 
query“exec( Insert into student values(L second) 
query.exec("insert into student values(2, 'third')"); 
query exec( insert nto student values(3 fourthe) 
query.exec("insert into student values(4, 'fifth"')"); 
eturn Ere 


} 
#endif // CONNECTION_H 


在 这 个 头 文件 中 我 们 添加 了 一 个 建立 连接 的 函数 ， 使 用 这 个 头 文件 的 目的 就 是 要 简化 主 函 数 
中 的 内 容 。 这 里 先 创建 了 一 个 SQLite 数 据 库 的 默认 连接 ， 设 置 数据 库 名 称 时 使 用 

了 “:memory:” ， 表明 这 个 是 建立 在 内 存 中 的 数据 库 ， 也 就 是 说 该 数据 库 只 在 程序 运行 期 间 有 
效 ， 等 程序 运行 结束 时 就 会 将 其 销毁 。 当 然 ， 大 家 也 可 以 将 其 改 为 一 个 具体 的 数据 库 名 称 ， 
比如 “my.db” ， 这 样 就 会 在 项 目 目录 中 创建 该 数据 库 文 件 了 。 下 面 使 用 open() 函数 将 数据 库 
打开 ， 如 果 打 开 失 败 ， 则 弹出 提示 对 话 框 。 最 后 使 用 QSqlQuery 创建 了 一 个 student 表 ， 并 
插入 了 包含 id 和 name 两 个 属性 的 五 条 记录 ， 如 下 图 所 示 。 其 中 ， id 属性 是 int 类 型 

的 ”EE 于 交趾 次 司 性 龙 主 链 ， 它 不 能 为 室 ， 而 且 不 能 有 重复 的 值 ;而 本 到 于 后 性 
是 varchar 类 型 的 ， 并 且 不 大 于 20 个 字符 。 这 里 使 用 的 SQL 语 句 都 要 包含 在 双 引 号 中 ， 如 果 
一 行 写 不 完 ， 那 么 分 行 后 ， 每 一 行 都 要 使 用 两 个 双 引 号 引起 来 。 





需要 注意 ， 代 码 中 的 query 没有 进行 任何 指定 就 可 以 操作 前 面 打开 的 数据 库 ， 这 是 因为 现在 
只 有 一 个 数据 库 连 接 ， 它 就 是 默认 连接 ， 这 时 候 所 有 的 操作 都 是 针对 该 连接 的 。 但 是 如 果 要 
同时 操作 多 个 数据 库 连 接 ， 就 需要 进行 指定 了 ， 这 方面 内 容 可 以 参考 《Qt Creator 快 速 入 门 》 
的 第 17 章 。 


3 :下面 我 们 到 main.cpp 中 调用 连接 函数 。 


C 
OO 





MN 


#include "mainwindow.h" 
#include <QApplication> 
#include "connection.h" 
Tntmarm nt arge cnare argvll) 


{ 


QApplication a(argc, argv); 


If (!createConnection()) 
FedQurnn, 


MainWindow w; 
w. show( ); 


peturn asexec(); 


4 我 们 往 界 面 上 添加 一 个 按钮 来 实现 查询 操作 。 双 击 mainwindow.ui 文件 进入 设计 模式 。 然 
后 将 一 个 push Button 拖 到 界面 上 ， 并 修改 其 显示 文本 为 “查询 ”。 效 果 如 下 图 所 示 。 





在 这 里 输入 








5 在 查询 按钮 上 点 击 息 标 右键 ， 选 择 “ 转 到 柳 "， 然 后 选择 clicked() 单 击 信号 槽 并 点 击 确 
定 ， 如 下 图 所 示 。 


clicked[) QAbstractButtor 
clickedlbool) QAbstractButtorn 
pressed[) QAbstractButtorn 
released[) QAbstractButtorn 


togeled (bool) QAbstractButton 
destroyed QObject 
destrovyed (QObject*) QObject 
customContextMenuRequested (QPoint) QWidget 








6 : 将 槽 的 内 容 更 改 如 下 : 


void MainWindow: :on_pushButton_clicked() 


{ 
QSqlQuery query; 
query“exec( select from student”); 
while(query.next()) 
qDebug() << query.value(0).toInt() 
<< query.value(1).toSstring(); 
} 
} 


7 在 mainwindow.cpp 文件 中 添加 头 文件 : 


#include <QSqlQuery> 
#include <QDebug> 


8 运行 程序 ， 然 后 按 下 查询 按钮 ， 在 应 用 程序 输出 窗口 将 会 输出 结果 ， 效 果 如 下 图 所 示 。 
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E:\myquery-build- 泉 面 -Debug\debug\myquery .exe 局 动 中 . 
四 

"second" 

Se 

"fourth" 
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操作 结果 集 


在 前 面 的 程序 中 ， 我 们 使 用 query.exec("select * from student"); 查询 出 表 中 所 有 的 内 容 。 
其 中 的 SQL 语句 “select * from student” 中 “*” 号 表明 查询 表 中 记录 的 所 有 属性 。 而 

当 query.exec("select * from student"); 这 条 语句 执行 完 后 ， 我 们 便 获 得 了 相应 的 执行 

果 ， 因 为 获得 的 结果 可 能 不 止 一 条 记录 ， 所 以 称 之 为 结果 集 。 


结果 集 其 实 就 是 查询 到 的 所 有 记录 的 集合 ， 在 QsqlQuery 类 中 提供 了 多 个 函数 来 操作 这 个 集 
合 ， 需 要 注意 这 个 集合 中 的 记录 是 从 0 开始 编号 的 。 最 常用 的 操作 有 : 


e seek(int n) : query 指向 结果 集 的 第 n 条 记录 ; 
e first() : query 指向 结果 集 的 第 一 条 记录 ; 
e last() : query 指向 结果 集 的 最 后 一 条 记录 ; 
e next() : query 指向 下 一 条 记录 ， 每 执行 一 次 该 函数 ， 便 指向 相 邻 的 下 一 条 记录 ; 
e previous() : query 指向 上 一 条 记录 ， 每 执行 一 次 该 函数 ， 便 指向 相 邻 的 上 一 条 记录 ; 
e。 record() : 获得 现在 指向 的 记录 ; 
© value(int n) 获得 属性 的 值 。 其 中 n 表示 你 查询 的 第 n 个 属性 ， 比 方 上 面 我 们 使 
用 “select * from student ”就 相 当 于 “select id, name from student” ， 那 
么 value(0) 返回 id 属性 的 值 ， value(1) 返回 name 属性 的 值 。 该 函数 返 
回 Qvariant 类 型 的 数据 ， 关 于 该 类 型 与 其 他 类 型 的 对 应 关系 ， 可 以 在 帮助 中 查看 
QVariant。 
e。 at() : 获得 现在 query 指向 的 记录 在 结果 集中 的 编号 。 


需要 特别 注意 ， 刚 执行 完 query.exec("select *from student"); 这 行 代码 时 ， query 是 指向 结 
果 集 以 外 的 ， 我 们 可 以 利用 query.next() 使 得 query 指向 结果 集 的 第 一 条 记录 。 当 然 我 们 也 
可 以 利用 Seek(0) 函数 或 者 first() 函数 使 query 指向 结果 集 的 第 一 条 记录 。 但 是 为 了 节省 
内 存 开 销 > 推荐 的 方法 是 2 在 query.exec("select * from student"); 过 这 行 代码 前 加 

上 query.setForwardonly(true); 这 条 代码 ， 此 后 只 能 使 用 next() 和 seek() 函数 。 


下 面 我 们 通过 例子 来 演示 一 下 这 些 函 数 的 使 用 。 将 模 更 改 如 下 : 


void Mainwindow: :on_pushButto 
QSqlQuery query; 
query"exec("select * from 
qDebug() << "exec next() 
// 开 始 就 先 执行 一 次 next( ) 元 数 
if(query.next()) 

{ 

// 获 取 query 所 指向 的 记录 在 
int rowNum = query.at( 
// 获 取 每 条 记录 中 属性 
int columnNum = query. 





( 即 列 ) 


n_clicked() 


student"); 


"ll 
号 


那么 query 指 向 结果 集 的 第 一 


条 记录 


结果 集中 的 编号 

); 

的 个 数 

record(). un 


// 获 取 "name" 属 性 所 在 列 的 编号 ， 列 从 左 向 右 编号 ， 最 左边 的 编号 为 0 
int fieldNo = query.record( ).indexof ("name"); 
// 获 取 id 属 性 的 值 ， 并 转换 为 nt 型 
int id = query.value(0).toInt(); 
// 获 取 name 属 性 的 值 
QString name = query.value(fieldNo).tostring(); 
// 将 结果 输出 
qdqDebug() << "rowNum is " << rowNum 
Ls " << id 
<< " name is " << name 
<< " columnNum is " << columnNum; 


// 定 位 到 结果 集中 编号 为 2 的 记录 ， 
qDebug() << "exec seek(2) 
if(query.seek(2) ) 

{ 


qDebug() << "rowNum is 
cS lol ts 
<< " name is 


} 

// 定 位 到 结果 集中 最 后 一 条 记录 
qDebug() << "exec last() 
If(query. Last()) 

{ 


qDebug() << "rowNum is 
=< ES 
<< " name is 


即 第 三 条 记录 ， 


因为 第 一 条 记录 的 编号 
| 
弄 | Fk 


: " << query.at() 
" << query.value(0).toInt() 


子 为 


" << query.value(1).toString(); 


: " << query.at() 
" << query.value(0).toInt() 


后 在 mainwindow.cpp 中 添加 #include <QSqlRecord> 


钮 ， 输 出 结果 如 下 图 所 示 。 


" << query.value(1).toString(); 


头 文件 包含 ， 运 行程 序 ， 点 


exec nextt{) 


rowNum 
exec seek(2) 
rowNum 


i183 


i3 


exec lastl) 


rowNum 


13 
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三 、 在 SQL 语句 中 使 用 变量 


1 我们 先 来 看 一 个 例子 。 首 先 在 设计 樟 


id is 0 name is "first" columnNum is : 2 
idQd is 2 name is be 
id is 4 name is ek 中 多 
模式 往 界 面 上 添加 一 个 Spin Box 部 件 ， 如 下 图 所 示 。 


在 这 里 输入 


2 . 将 查询 按钮 模 里 面 的 内 容 更 改 如 下 : 


void MainwWindow: :on_pushButton_clicked() 
{ 
QSqlQuery query; 
int id = ui->spinBox->value(); 
query.exec(QString("select name from student where id =%1") 
.arg(id)); 
query.next(); 
QString name = query.value(0).toSstring(); 
qDebug() << name; 


这 里 使 用 了 Qstring 类 的 arg() 函数 实现 了 在 SQL 语 句 中 使 用 变量 ， 我 们 运行 程序 ， 更 
改 Spin Box 的 值 ， 然 后 点 击 查询 按钮 ， 效 果 如 下 图 所 示 。 


Wl Nain¥Yindow 加 回国 





3 其 实在 QsqlQuery 类 中 提供 了 数据 绑 定 同样 可 以 实现 在 SQL 语 负 中 使 用 变量 ， 虽 然 它 也 是 
通过 占 位 符 来 实现 的 ， 不 过 使 用 它 形式 上 更 明了 一 些 。 下 面 先 来 看 一 个 例子 ， 将 查询 按钮 模 
更 改 如 下 : 


void Mainwindow: :on_pushButton_clicked() 


{ 
QSqlQuery query; 
query.prepare("insert into student (id, name) " 
veluese( Lc :MameD 
query.bindValue(0, 5); 
query.bindValue(1, "sixth"); 
query .exec(); 
query.exec("select * from student"); 
query.last(); 
Int id = query.value(0).toInt(); 
QString name = query.value(1).toSstring(); 
qDebug() << id << name; 
} 


这 里 在 student 表 的 最 后 又 添加 了 一 条 记录 。 然 后 我 们 先 使 用 了 prepare() 函数 ， 在 其 中 利 
用 了 “id” 和 “:name” 来 代替 具体 的 数据 ， 而 后 又 利用 bindvalue() 函数 给 id 和 name 两 个 
属性 赋值 ， 这 称 为 绑 定 操作 。 其 中 编号 0 和 1 分 别 代 表 “:id” 和 “:name” ， 就 是 说 按 

照 prepare() 函数 中 出 现 的 属性 从 左 到 右 编号 ， 最 左边 是 0。 


特别 注意 ， 在 最 后 一 定 要 执行 exec() 函数 ， 所 做 的 操作 才能 被 站 正 执行 。 运 行程 序 ， 点 击 查 
询 按钮 ， 可 以 看 到 前 面 添加 的 记录 的 信息 。 这 里 的 id” 和 “:name” ， 叫 做 占 位 符 ， 这 是 
ODBC 数 据 库 的 表示 方法 ， 还 有 一 种 Oracle 的 表示 方法 就 是 全 部 用 "? "号 。 例 如 : 


query.prepare("insert into student(id, name) " 
Vouesn (2 

query.bindValue(0, 5); 

query.bindValue(1, "sixth"); 

query .exec(); 


也 可 以 利用 addBindvalue() 驾 数 ， 这 样 就 可 以 省 去 编号 ， 它 是 按 顺序 给 属性 赋值 的 ， 如 下 : 


query.prepare("insert into student(id, name) " 
-valuesn( 2) 

query.addBindValue(5); 

query.addBindValue("sixth"); 

query .exec(); 


当 用 ODBC 的 表示 方法 时 ， 我 们 也 可 以 将 编号 用 实际 的 占 位 符 代 替 ， 如 下 : 


query.prepare("insert into student(id, name) " 
-valuese (de named ny, 

query.bindValue(":id", 5); 

query.bindValue(":name", "sixth"); 

query .exec(); 


以 上 各 种 形式 的 表示 方式 效果 是 一 样 的 。 


4 : 下面 我 们 演示 一 下 通过 绑 定 操作 在 SQL 语 印 中 使 用 变量 。 更 改 槽 函数 如 下 : 


void Mainwindow: :on_pushButton_clicked() 


{ 
QSqlQuery query; 
query.prepare("select name from student where id = ?"); 
int id = ui->spinBox->value(); 
query.addBindValue(id); 
query .exec(); 
query.next(); 
qDebug() << query.value(0).tostring(); 
} 


运行 程序 ， 可 以 实现 通过 Spin Box 的 值 来 进行 查询 。 


四 、 批 处 理 操 作 


当 要 进行 多 条 记录 的 操作 时 ， 我 们 就 可 以 利用 绑 定 进行 批 处 理 。 将 槽 更 改 如 下 : 


void Mainwindow: :on_pushButton_clicked() 
{ 
QSqlQuery 9q; 
q.prepare("insert into student Values (?, ?)"); 
QVariantList ints,; 
nS < 0 < 1 < 9 
q.addBindValue(ints); 
QVariantList names; 
// 最 后 一 个 是 空 字 符 串 ， 应 与 前 面 的 格式 相同 
names << "xiaoming" << "xiaoliang" 
<< "xiaogang" << QVariant(QVariant::string); 
q.addBindValue(names); 
if (1!q,execBatch()) // 进 行 批 处 理 ， 如 果 出 错 就 输出 错误 
qDebug() << q.lastError(); 
// 下 面 输出 整 张 表 
QSqlQuery query 
query.exec(" select * from student"); 
while(query.next()) 


int id = query.value(0).toInt(); 
QString name = query.value(1).tostring(); 
qDebug() << id << name; 


} 


后 需要 在 mainwindow. cpp 上 添加 头 文件 包含 : #include <QSqlError> ° 我 们 在 程序 中 利用 
了 同一 属性 的 多 多 个 值 ， 然 后 进行 了 和 °。 最 后 执行 execBatch() 况 数 进行 批 处 理 。 
注意 程序 中 利用 avariant(Qvariant: :String) 来 输入 空 值 NULL ， 因 为 前 面 都 是 Qstring 类 型 
的 ， 所 以 这 里 要 使 用 aovariant: :String 使 格式 一 致 化 。 运行 程序 ， 效 果 如 下 图 所 示 : 
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五 、 事 务 操作 


事务 可 以 保证 一 个 复杂 的 操作 的 原子 性 ， WT ， 这 些 操作 要 么 全 部 
做 完 ， 要 么 一 条 也 不 做 ， 它 是 一 个 不 可 分 割 的 工作 单位 。 在 Qt 中 ， 如 果 底 层 的 数据 库 引 擎 支 
持 事务 ， 那么 QSqlDriver::hasFeature(QSqlDriver::Transactions) 会 返回 true 。 可 以 使 

用 QSqlDatabase: :transaction() 来 启 动 一 个 事务 ， 然 后 编写 一 些 硕 望 在 事务 中 执行 的 SQL 语 
押 ， 最 后 调用 Qsqlpatabase: :commit() 或 者 QsqlDatabase: :rollback() 。 当 使 用 事务 时 必须 在 
创建 查询 以 前 就 开始 事务 ， 例 如 : 


QSqlDatabase: :database().transaction(); 
QSqlQuery query; 
query.exec("SELECT id FROMemployee WHERE name = 'Torild Halvorsen'"); 
if (query.next()) { 
Int employeeId = query.value(0).toInt(); 
query.exec("INSERT INTO project(id, name, ownerid) " 
"VALUES (201, 'Manhattanproject', " 
+ QString::number(employeeId) + ')'); 


} 
QSqlDatabase: :database().commit(); 


对 执行 SQL 语 句 我 们 就 介绍 这 么 多 ， 其 实 Qt 中 提供 了 更 为 简单 的 不 需要 SQL 语 名 就 可 以 操作 
数据 库 的 方法 ， 我 们 在 下 一 节 讲 述 这 些 内 


及 到 的 源码 : 


e myquery01.zip 
e myquery02.zip 


第 24 篇 数据 库 (四 ) SQL 查询 模 
型 QSqlQueryModel 


导语 


在 上 一 篇 的 最 后 我 们 讲 到 ，Qt 中 使 用 了 自己 的 机 制 来 避免 使 用 SQL 语 句 ， 为 我 们 提供 了 更 简 
单 的 数据 库 操作 及 数据 显示 模型 2 分 别 是 只 读 的 QSqlQueryModel ， 操作 单 表 

的 QsqlTableModel 和 以 及 可 以 支持 外 键 的 QsqlRelationalTableModel 。 这 次 我 们 先 讲 

解 QSqlQueryModel ° 


环境 : Windows Xp + Qt 4.8.4+Qt Creator2.6.2 


目录 


。 一 、 简 单 的 查询 操作 
e 一 、 QSqlQueryModel 常用 操作 
e 三 、 创 建 自 定义 QSqlQueryModel 


正 丈 
一 、 简 单 的 查询 操作 
1 .新建 Qt Gui 应 用 ， 项 目 名 称 为 queryModel ， 基 类 为 QMainwindow ， 类 名 为 Mainwindow 。 


2 完成 后 打开 queryModel.pro ， 将 第 一 行 代码 更 改 为 : 


QT += core gui sql 


然后 保存 该 文件 。 


3 往 项 目 中 添加 新 的 C++ 头 文件 ， 名 称 为 connection.h ， 完 成 后 将 其 内 容 更 改 如 下 : 


#ifndef CONNECTION_H 

#define CONNECTION_H 

#include <QSqlDatabase> 

#include <QSqlQuery> 

statlc hoo ereateConnect1ion() 

{ 
QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE"); 
db.setDatabaseName("database.db"); 
if(!db.open()) return false,; 
QSqlQuery query; 
query-:exec( "create table student (idMint "primary key ”name vehar)®), 
query sexec( nsert nton student values (OP valero N)) 
query sexec( nsernt umntoP studene valuese (de vafer) en) 
query Sexec( nsevtMinto student valuesa (2 Valer2) 
return true>, 


} 
#endif // CONNECTION_H 


这 里 使 用 了 db.setpatabaseName("database.db"); ， 我 们 没有 再 使 用 以 前 的 内 存 数据 库 ， 而 是 
使 用 了 申 实 的 文件 ， 这 样 后 面 对 数 据 库 进行 的 操作 就 能 保存 下 来 了 。 


4 然后 进入 main.cpp 文件 ， 更 改 如 下 : 


#include "mainwindow.h" 
#include <QApplication> 
#include "connection.h" 


nt mamm(ant argqec > chnar “argypl) 
{ 
QApplication a(argc, argv); 
if(!createConnection()) 
elUrne 
Mainwindow w; 
w. show( ); 
return a.exec(); 


5 .下面 进 入 设计 模式 ， 向 界面 上 拖 入 一 个 Push Button 按钮 ， 更 改 显 示 文 本 为 “查询 ”， 然 后 
进入 其 单 击 信号 档 ， 更 改 如 下 : 


void Mainwindow: :on_pushButton_clicked() 


{ 
QSqlQueryModel *model = new QSqlQueryModel; 
model->setQuery("select * from student"); 
model->setHeaderData(0, Qt::Horizontal, tr("id")); 
model->setHeaderData(1, Qt::Horizontal, tr("name")); 
QTableView *view = new QTableView; 
view->setModel(model); 
view->show( ); 

} 


这 里 新 建 了 QSqlQueryMode | 类 对 象 model ， 并 用 setQuery() 函数 执行 了 SQL 语 

名 “("select * fromstudent");” 用 来 查询 整个 student 表 的 内 容 ， 可 以 看 到 ， 该 类 并 没有 完 
全 避免 SQL 语句 。 然 后 我 们 设置 了 表 中 属性 显示 时 的 名 字 。 最 后 我 们 建立 了 一 个 视图 view ， 
并 将 这 个 model 模型 关联 到 视图 中 ， 这 样 数据 库 中 的 数据 就 能 在 窗口 上 的 表 中 显示 出 来 了 。 


6 :在 mainwindow.cpp 中 添加 头 文件 包含 : 
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#include <QSqlQueryModel> 
#include <QTableView> 


7 运行 程序 ， 按 下 查询 按钮 ， 效 果 如 下 图 所 示 。 
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8 我 们 查看 一 下 编译 生成 的 目录 (我 这 里 是 E:N\queryMode1-build- 桌 面 -Debug ) ， 这 里 面 有 生 


成 的 数据 库 文件 ， 如 下 图 所 示 。 


和 query 有 odel-build- 泉 面 -Debug 
文件 区) 编辑 区 ) ”查看 名 收藏 上 工具 I) 和 攻 助 员 ) 


@iE- 日 ,- 访 记 烘 和 启 咏 及 国 - 了 V 盖 





同 EF:\queryllodel-build- 上 和 桌面-Debug 





文件 和 文件 夹 任务 vy 加 ne ese 


人 


- A Nakefile NN Makefile. Debug 
< 本 地 碰 盘 到 :) 文件 DEBUG 文科 


加 我 的 文档 
白 共享 立 档 ui_mainwindow 


[C++ Header file 
是 我 的 电脑 3 到 
好 网 上 久居 


类 型 : 数据 库 文件 修改 日 期 : 2013-5-16 11:16 大 小 : 3.00 葬 
二 、 QsqlQueryModel 常用 操作 


1 在 查询 按钮 楼 中 继续 添加 如 下 代码 : 


A Makefile. Release 
RELEASE 文件 
6 
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上 


int column= model->columnCount(); // 获 得 列 数 





int row = model->rowCount(); // 获得 行 数 
QSqlRecord record = model->record(1); / /获得 一 条 记录 
QModelIndex index = model->index(1,1);  ”// 获 得 一 条 记录 的 一 个 属性 的 值 


qDebug() << "column numis:" << column << endl 
<< "row num is:" << row << endl 
<<"the second record is:" << record << endl 
<< "the data of index(1,1) is:"<< index.data(); 


2 然后 在 mainwindow.cpp 文件 中 添加 下 面 的 头 文 件 包含 : 


#include <QSqlRecord> 
#include <QModelIndex> 
#include <QDebug> 


3， 运行 程序 ， 点 击 查 询 按 钮 ， 输 出 内 容 如 下 图 所 示 。 


column num is: 2 


row num is: 3 
the second record is: QSqalRecord( 2 ) 


mn OQO:™ QSqlField("id", int, generated: yes, typeID: 1) "i" 
mn :nm QSqlField("name", QString, generated: yes, typeID: 3) "yafeii" 
the data of index (i,1) is: QVariant (QString, "vafei1") 


4 另外 我 们 可 以 直接 使 用 上 一 节 讲 到 的 QsqlQuery 来 执行 SQL 语 句 ， 例 如 : 


QSqlQuery query = model->query(); 

query.exec("select name from studentwhere id = 2 "); 
query.next(); 

qDebug() << query.value(0).toString(); 


5. 我 们 将 查询 按钮 模 更 改 如 下 : 


void MainWindow: :on_pushButton_clicked() 


{ 
QSqlQueryModel *model = new QSqlQueryModel; 
model->setQuery("select * from student"); 
model->setHeaderData(0, Qt::Horizontal, tr("id")); 
model->setHeaderData(1, Qt::Horizontal, tr("name")); 
QTableView *view = new QTableView; 
view->setModel(model); 
view->show( ); 
QSqlQuery query = model->query(); 
query exec( nsertintonstudent values (L107 vaferlo ne) 
} 


这 里 使 用 query 向 表 中 添加 了 一 条 记录 。 


6 .在 mainwindow.cpp 中 添加 头 文件 #include <QsqlQuery> ， 然 后 运行 程序 ， 发 现 最 后 添加 的 
记录 并 没有 显示 出 来 ， 当 关闭 程序 ， 再 次 运行 的 时 候 才 显示 出 来 ， 效 果 如 下 图 所 示 。 
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7 为 什么 会 出 现 上 面 的 情况 呢 ? 那 是 因为 前 面 我 们 执行 了 添加 记录 的 SQL 语 句 ， 但 是 在 添加 
记录 之 前 ， 查 询 结果 就 已 经 显示 了 ， 所 以 我 们 的 更 新 没 能 动态 的 显示 出 来 。 为 了 能 让 其 动态 
地 显示 我 们 的 更 新 ， 可 以 将 楼 最 后 的 代码 更 改 如 下 : 


QSqlQuery query = model->query() ; 

querysexec( nsert unto student values(20r Vafen200 ) ) 
model->setQuery("select * from student"); // 再 次 查询 整 张 表 
View->show(); // 再 次 进行 显示 


这 里 我 们 修改 完 表 以 后 ， 再 次 进行 了 查询 并 显 ; 
接 显示 出 来 了 。 


7 


。 大 家 可 以 运行 程序 ， 发 现 新 的 记录 可 以 直 


三 、 创 建 自 定 义 QsqlQueryModel 


前 面 我 们 讲 到 这 个 模型 默认 是 只 读 的 ， 所 以 在 窗口 上 并 不 能 对 表格 中 的 内 容 进行 修改 。 但 是 
我 们 可 以 创建 自己 的 模型 ， 然 后 按照 自己 的 意愿 来 显示 数据 和 修改 数据 。 要 想 使 其 可 读 写 ， 
需要 自己 的 类 继承 自 QsqlQueryModel ， 并 且 重 写 setpata() 和 flags() 两 个 函数 。 如 果 我 
们 要 改变 数据 的 显示 ， 就 要 重 写 data() 函数 。 


下 面 的 例子 中 我 们 让 student 表 查 询 结果 的 id 属性 列 显 示 红 色 ， name 属性 列 可 编辑 。 


1 向 项 目 中 添加 新 的 C++ 类 ， 类 名 为 MysqlQueryModel ， 基 类 为 QsqlQueryModel ， 类 型 信息 


选择 “继承 自 Qobject ”。 


2 完成 后 打开 mysqlquerymodel.h 文件 ， 在 public 中 添加 函数 声明 : 


Qt::ItemFlags flags(const QModelIndex &index) const ， 
bool setData(const QModelIndex &index, const QVariant &value, int role); 
QVariant data(const QModelIndex &item, int role=Qt::DisplayRole) const; 


然后 添加 私有 函数 声明 : 
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private: 
bool setName(int studentId, const QString &name ) ; 
vondretresh(), 


“到 mysqlquerymodel .cpp 文件 中 ， 更 改 如 下 : 


#include "mysqlquerymodel.h" 

#include <QSqlQuery> 

#include <QColor> 

MySqlQueryModel: :MySqlQueryModel(QObject *parent) 
QSqlQueryModel(parent) 


{ 
} 


Qt::ItemFlags MySqlQueryModel::flags( 





const QModelIndex &index) const // 返 全 可 更 改 的 标志 
{ 
Qt::ItemFlags flags = QSqlQueryModel::flags(index); 
if (index.column() == 1) // 第 二 个 属性 可 更 改 
flags |= Qt::ItemIsEditable; 
return flags; 
} 


bool MySqlQueryModel::setData(const QModelIndex &index, const QVariant &value, int /* 
noLen A) 

// 添 加 数据 
{ 


if (index.column() < 1 || index.column() > 2) 
return false; 
QModelIndex primaryKeyIndex = QSqlQueryModel::index(index.row(), 0); 
int id = data(primaryKeyIndex).toInt(); // 获 取 id 号 
clear(); 
bool ok; 
if (index.column() == 1) // 第 二 个 属性 可 更 改 
ok = setName(id, value.toString()); 
refresh(); 
return ok; 


} 


void MySqlQueryModel: :refresh() // 更 3 





setQuery("select * from student"); 

setHeaderData(0, Qt::Horizontal, QObject::tr("id")); 

setHeaderData(1, Qt::Horizontal, QObject::tr("name")); 
} 


// 添 加 name 属 性 的 值 
bool MySqlQueryModel::setName(int studentId，const QString &name ) 


QSqlQuery query 

query.prepare("update student set name = ? where id = ?"); 
query.addBindValue(name); 

query.addBindValue(studentId); 

return query.exec(); 


} 


// 更 改 数据 显示 样式 
QVariant MySqlQueryModel::data(const QModelIndex &index, int role) const 


{ 
QVariant value = QSqlQueryModel::data(index, role); 


// 第 一 个 属性 的 字体 颜色 为 红色 
If (role == Qt::TextColorRole && index.column() == 0) 
return qVariantFromValue(QColor(Qt::red)); 
return Value ， 


} 
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4 到 mainwindow.cpp 文 件 中 先 添加 头 文件 包含 : 
#include "mysqlquerymodel.h" 


5 更改 查 询 按 钮 构 内 容 如 下 : 

void MainwWindow: :on_pushButton_clicked() 

{ 
QSqlQueryModel *model = new QSqlQueryModel; 
model->setQuery("select * from student"); 
model->setHeaderData(0, Qt::Horizontal, tr("id")); 
model->setHeaderData(1, Qt::Horizontal, tr("name")); 
QTableView *view = new QTableView; 
view->setModel(model); 
view->show( ); 


// 创 建 自己 模型 的 对 象 

MySqlQueryModel *myModel = new MySqlQueryModel; myModel->setQuery("select * fro 
m student"); 

myModel->setHeaderData(0, Qt::Horizontal, tr("id")); 

myModel->setHeaderData(1, Qt::Horizontal, tr("name")); 

QTableView *viewl1 = new QTableView; 

view1->setwindowTitle("mySqlQueryModel"); // 修 改 窗口 标题 

View1->setModel(myModel); 

view1->show( ); 


运行 程序 ， 效 果 如 下 图 所 示 。 
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本 节 讲 解 了 QsqlQueryModel 的 相关 内 容 ， 该 类 默认 是 一 个 只 读 的 SQL 语 名 查询 模型 ， 不 过 可 
以 对 其 进行 重 写 来 实现 编辑 功能 。 下 一 节 我 们 将 讲解 封装 更 好 的 QsqlTableModel 模型 ， 它 已 
经 基本 上 摆脱 了 SQL 语 名 。 


涉及 到 的 源码 
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数据 库 〈 五 ) SQL 表格 模 
型 QSqlTableModel 


导语 


在 上 一 篇 我 们 讲 到 只 读 的 QsqlQueryModel 模型 其 实 也 可 以 实现 编辑 功能 的 ， 但 是 实现 起 来 很 
麻烦 "而 QSqlTableModel 提供 了 一 个 一 次 次 只 能 操作 单个 SQL 表 的 读 写 模型 ， 它 

是 QsqlQuery 的 更 高 层次 的 替代 品 ， 可 以 浏览 和 修改 独立 的 SQL 表 ， 并 且 只 需 编写 很 少 的 代 
码 ， 而 且 不 需要 了 解 SQL 语法 。 


环境 : Windows Xp + Qt 4.8.4+QtCreator 2.6.2 


目录 


。 一 、 创 建 数 据 库 
。 二 、 修 改 操作 
。 三 、 查 询 操作 
e@ 四 、 排序 操作 
e。 五、 删除 操作 
e 六、 插入 操作 


下 
一 、 创 建 数 据 库 
1 新 建 Qt Gui 应 用 ， 项 目 名 称 为 tableModel ， 基 类 QMainwindow ， 类 名 Mainwindow 。 


PE 完成 后 打开 tableModel .pro 文件 ， 将 第 一 行 代码 更 改 为 : 


QT += coregui sql 


然后 保存 文件 。 


3 向 项 目 中 添加 新 的 C++ 头 文件 ， 名 称 为 connection.h 。 完 成 后 将 其 内 容 更 改 如 下 : 


#ifndef CONNECTION_H 

#define CONNECTION_H 

#include <QSqlDatabase> 

#include <QSqlQuery> 

statlc hooLl ereateConnect1ionm() 

{ 
QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE"); 
db.setDatabaseName("database.db"); 
if(!db.open()) return false,; 
QSqlQuery query; 
query.exec(QString( 

"create table student (id int primary key, name vehar)”)); 
query.exec(QString("insert into student values (0, ' 刘 明 ')")); 
query.exec(QString("insert into student values (1,' 陈 刚 ')")) 
query.exec(QString("insert into student values (2,' 王 红 ')")) 
return true, 


六 


#endif // CONNECTION_H 


这 里 因为 语句 中 使 用 了 中 文 ， 所 以 使 用 了 Qstring() 进行 编码 转换 ， 这 个 还 需要 在 main() 函 
数 中 设置 编码 。 


4 .下 面 将 main.cpp 文件 更 改 如 下 : 


#include "mainwindow.h" 
#include <QApplication> 
#include "connection.h" 
#include <QTextCodec> 
nnt mazn(nt arge cnar argvpl) 
{ 
QApplication a(argc, argv); 
QTextCodec: :setCodecForTr(QTextCodec: :codecForName("utf8")); 
QTextCodec: :setCodecForCStrings(QTextCodec: :codecForLocale()); 
if(!createConnection()) 
neturnm ad 
MainwWindow w; 
w.show( ); 


heturn asexec(), 


这 里 的 setcodecForCstrings() 就 是 用 来 设置 字符 串 编码 的 。 


5 .下 面 进入 设计 模式 ， 向 窗口 上 拖 入 Label 、 Push Button 、 Line Edit 和 Table View 等 部 
件 ， 进 行 界 面 设计 ， 效 果 如 下 图 所 示 。 
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6 完成 后 到 mainwindow.h 文件 中 ， 先 包含 头 文件 : 


#include <QSqlTableModel> 


然后 添加 私有 对 象 声 明 : 


QSqlTableModel *model; 


7 到 mainwindow.cpp ， 在 构造 函数 添加 如 下 代码 : 


model = new QSqlTableModel(this); 
model->setTable("student"); 
model->setEditStrategy(QSqlTableModel: :OnManualSubmit); 


model->select(); // 选 取 整 个 表 的 所 有 行 

// 不 显示 name 属 性 列 , 如果 这 时 添加 记录 ， 则 该 属性 的 值 添加 不 上 

// model->removeColumn(1); 

ui->tableView->setModel(model); 

// 使 其 不 可 编辑 

//Ui->tableView->setEditTriggers(QAbstractIitemView: :NoEditTriggers); 






这 里 创建 一 个 QsqlTableModel 后 ， 只 需 使 用 setTable() 来 为 其 指定 数据 库 表 ， 然 后 使 

用 select() 函数 进行 查询 ， 调用 这 两 个 函数 就 等 价 于 执行 了 “select * from student” 这 个 
SQL 语句 。 这 里 还 可 以 使 用 setFilter() 来 指定 查询 时 的 条 件 ， 在 后 面 会 看 到 这 个 函数 的 使 
用 。 在 使 用 该 模型 以 前 ， 一 般 还 要 设置 其 编辑 策略 ， 它 由 QsqlTableModel: :Editstrategy 枚 举 
变量 定义 ， 一 共有 三 个 值 ， 如 下 图 所 示 。 用 来 说 明 当 数据 库 中 的 值 被 编辑 后 ， 什 么 情况 下 提 
交 修 改 。 


人 


对 一 条 记 好 0B 会 在 用 户 这 近 甸 一 记 寻访 


QSqlTableModel:-OnManualSubmit 所 有 的 改变 都 会 在 模型 中 进行 垦 存 ,直到 调用 submitAll0 
或 者 revertAll0 消 数 


运行 程序 ， 效 果 如 下 图 所 示 。 
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可 以 看 到 ， 这 个 模型 已 经 完全 脱离 了 SQL 语句 ， 我 们 只 需要 执行 select() 函数 就 能 查询 整 张 
表 。 上 面 有 两 行 代码 被 注释 掉 了 ， 你 可 以 取消 注释 ， 测 试 一 下 它们 的 作用 。 


二 、 修 改 操作 


1 我 们 进入 “提交 修改 "按钮 的 单 击 信 号 档 ， 更 改 如 下 : 


void MainWindow: :on_pushButton_3_clicked() 


model->database().transaction(); // 开 始 事务 操作 
if (model->submitAl1()) { 
model->database().,commit(); // 提 交 
} else 
model->database().rollback(); // 回 深 
QMessageBox: :warning(this, tr("tableModel"), 
tr(" 数 据 库 错 误 : %1") 
.arg(model->lastError().text())); 


这 里 用 到 了 事务 操作 ， 丨 正 起 提交 操作 的 是 model->submitAll() 一 句 ， 它 提交 所 有 更 改 。 


2 . 进入 “撤销 修改 "按钮 的 单 击 信号 楷 ， 更 改 如 下 : 


void Mainwindow: :on_pushButton_4_ clicked() 


model->revertAll( ); 


3 .在 mainwindow.cpp 文件 中 包含 头 文件 : 


#include <QMessageBox> 
#include <QSqlError> 


“ 现在 运行 程序 ， 我 们 将 “陈刚 ” 改 为 “李强 ”"”， 如 果 我 们 点 击 “ 撤 销 修改 "， 那么 它 就 会 重新 改 
es 交 人 修改" 后 它 就 会 保存 到 数据 库 ， 此 时 再 点 击 “ 撤 销 修改 "就 修改 不 
回来 了 。 


可 以 看 到 ， 这 个 模型 可 以 将 所 有 修改 先 保存 到 model 中 ， 只 有 当 我 们 执行 提交 修改 后 ， 才 会 
站 正 写 入 数据 库 。 当 然 这 也 是 因为 我 们 在 最 开始 设置 了 它 的 保存 策略 : 


model->setEditStrategy(QSqlTableModel: :OnManualSubmit); 
这 里 的 onManualsubmit 表明 我 们 要 提交 修改 才能 使 其 生效 。 
三 、 查 询 操作 
1 进入 “查询 "按钮 的 单 击 信 号 柳 ， 更 改 如 下 : 


void MainWindow: :on_pushButton_clicked() 


{ 
2 name = Ui- >lineEdit->text(); 
/ /条 名 进行 
model- >setFilter (QString "nane = '%1'").arg(name)); 
/7 5 果 
Me Se 
} 


使 用 setFilter() 函数 进 行 关 键 字 算 选 ， 这 个 函数 是 对 整个 结果 集 进 行 查 询 。 


2 .进入 “显示 全 表 ” 按 钮 的 单 击 信号 楷 ， 更 改 如 下 : 


void MainWindow: :on_pushButton_2_ clicked() 


{ 





model->setTable("student"); // 重 
model->select(); // 这 样 才能 再 次 显示 





为 了 再 次 显示 整个 表 的 内 容 ， 我 们 需要 再 次 关联 这 个 表 。 


3 下 面 运行 程序 ， 输 入 一 个 姓名 ， 点 击 "查询 "按钮 后 ， 就 可 以 显示 该 记录 了 。 再 点 击 “ 显 示 全 
表 ” 按 钮 则 返回 。 如 下 图 所 示 。 
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四 、 排 序 操作 
分 别 进 入 “ 按 id 升 序 排序 "和 " 按 id 降 序 排序 "按钮 的 单 击 信号 模 ， 更 改 如 下 : 


X77 盾 序 
void Mainwindow: :on_pushButton_7_clicked() 


model->setSort(0，Qt::AscendingOrder); //id 属 性 即 第 0 列 ， 升 序 排 列 
model->select(); 


De 
// 降序 
void MainwWindow: :on_pushButton_8_clicked() 


model->setSort(0, Qt::DescendingOorder); 
model->select(); 


} 


这 里 使 用 了 setsort() 函数 进行 排序 ， 它 有 两 个 参数 ， 第 一 个 参数 表示 按 第 几 个 属性 排序 ， 
表 头 从 左 向 右 ， 最 左边 是 第 0 个 属性 ， 这 里 就 是 id 属性 。 第 二 个 参数 是 排序 方法 ， 有 升序 和 降 
序 两 种 。 运 行程 序 ， 效 果 如 下 图 所 示 。 
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五 、 删 除 操作 


我 们 进入 “删除 选中 行 "按钮 的 单 击 信 号 档 ， 更 改 如 下 : 


void Mainwindow: :on_pushButton_6_ clicked() 


{ 

// 获 取 选 中 的 行 

Int curRow = ui->tableView->currentIindex().row(); 

// 删 除 该 行 

model->removeRow(curRow); 

int ok = QMessageBox: :warning(this,tr(" 籼 除 当 前 行 1"), tr(" 你 确定 " 
"删除 当前 行 吗 ? ")， 

QMessageBox: :Yes, QMessageBox: :No); 
if(ok == QMessageBox::No) 
model->revertAll(); // 如 果 不 删除 ， 则 撤销 
else model->submitAll(); // 和 否则 提交 ， 在 数据 库 中 删除 该 行 


删除 行 的 操作 会 先 保存 在 model 中 ， 当 我 们 执行 了 submitAl1() 
中 删除 该 行 。 这 里 我 们 使 用 了 一 个 警告 框 来 让 用 户 选 择 是 否 真 得 要 删除 该 行 。 运 行程 序 ， 效 
果 如 下 图 所 示 。 
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我 们 点 击 第 二 行 ， 然 后 单 击 “ 删 除 选中 行 "按钮 ， 出 现 了 警告 框 。 这 时 你 会 发 现 ， 表 中 的 第 二 行 
前 面 出 现 了 一 个 小 感叹 号 ， 表 明 该 行 已 经 被 修改 了 ， 但 是 还 没有 贤 正 的 在 数据 库 中 修改 ， 这 
时 的 数据 有 个 学 名 叫 脏 数 据 (Dirty Data)。 尖 我 们 按钮 "Yes" 按 钮 后 数据 库 中 的 数据 就 会 被 删 
除 ， 如 果 按 下 “No”， 那 么 更 改 就 会 取消 。 


六 、 插 入 操作 


我 们 进入 "添加 记录 "按钮 的 单 击 信号 楼 ， 更 改 如 下 : 


void Mainwindow: :on_pushButton_5_clicked() 


{ 
int rowNum = model->rowCount(); // 获 得 表 的 行 数 
int id = 10; 
model->insertRow(rowNum); // 添 如 一 行 
model->setData(model->index(rowNum,0),id); 
//model->submitAll1( ); // 可 以 直接 提交 

} 


在 表 的 最 后 添加 一 行 ， 因 为 在 student 表 中 我 们 设置 了 id 号 是 主键 ， 所 以 这 里 必须 使 

用 setpata() 函数 给 新 加 的 行 添加 id 属性 的 值 ， 不 然 添加 行 就 不 会 成 功 。 这 里 可 以 直接 调 
用 submitA11() 函数 进行 提交 ， 也 可 以 利用 "提交 修改 "按钮 进行 提交 。 运 行程 序 ， 效 果 如 下 图 
所 示 。 
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按 下 “添加 记录 "按钮 后 ， 就 添加 了 一 行 ， 不 过 在 该 行 的 前 面 有 个 星 号 ， 如 果 我 们 按 下 "提交 修 
改 "按钮 ， 这 个 星 号 就 会 消失 。 当 然 ， 如 果 我 们 将 上 面 代 码 里 的 提交 函数 的 注释 去 掉 ， 也 就 不 
会 有 这 个 星 号 了 。 


结语 
可 以 看 到 这 个 模型 很 强大 ， 而 且 完全 脱离 了 SQL 语句 ， 就 算 你 不 怎么 懂 数 据 库 知识 ， 也 可 以 


利用 它 进 行 大 部 分 常用 的 操作 。 我 们 也 看 到 了 ， 这 个 模型 提供 了 缓冲 区 ， 可 以 先 将 修改 保存 
起 来 ， 当 我 们 执行 提交 元 数 时 ， 再 去 丨 正 地 修改 数据 库 。 当 然 ， 这 个 模型 比 前 面 的 模型 更 高 
级 ， 前 面 讲 的 所 有 操作 ， 在 这 里 都 能 执行 。 


涉及 到 的 源码 


第 26 篇 数据 库 (六 ) SQL 关系 表格 模 
型 QSqlRelationalTableModel 


导语 


QSqlRelationalTableModel 继承 自 QSqlTableModel] ， 并 且 对 其 进行 了 扩展 ， 提供 了 对 外 键 的 支 
持 。 一 个 外 键 就 是 一 个 表 中 的 一 个 属性 和 其 他 表 中 的 主键 属性 之 间 的 一 对 一 的 映射 。 例 

如 ， student 表 中 的 course 属性 对 应 的 是 course 表 中 的 id 属性 ， 那 么 就 称 属 性 course 是 
一 个 外 键 。 因 为 这 里 的 course 属性 的 值 是 一 些 数字 ， 这 样 的 显示 很 不 友好 ， 使 用 关系 表格 模 
型 ， 就 可 以 将 它 显 示 为 Course 表 中 的 name 属性 的 值 


环境 : Windows Xp + Qt 4.8.4+QtCreator 2.6.2 


目 系 


e 一 、 使 用 外 键 
e 二 、 使 用 委托 


下 又 
一 、 使 用 外 键 


人 > 新 建 Qt Gui 应 用 ， 名 称 为 relationalTableModel ， 基 类 为 QMainwindow ， 类 名 
为 Mainwindow 。 完 成 后 打开 relationalTableModel.pro 项 目 文件 ， 将 第 一 行政 为 : 


QT += coregui sql 


然后 保存 该 文件 。 


2 下 面向 项 目 中 添加 新 的 C++ 头 文件 connection.h ， 并 更 改 其 内 容 如 下 : 


#ifndef CONNECTION_H 

#define CONNECTION_H 

#include <QSqlDatabase> 

#include <QSqlQuery> 

static bool createConnection() 

{ 
QSqlDatabase db = QSqlDatabase: :addDatabase( "QSQLITE"); 
db.setDatabaseName("database.db"); 
if(!db.open()) return false; 
QSqlQuery query; 
aquerysexec(ereate table®student (damnt primary key name vehar coursee nt) ); 
auery sexec( nsert .nto student values(le Vaferno 1) 
auerysexec(w nsert antonstudent valuesi(2e Vaferd .1D ); 
ouery exec( nsert ntomstudentlvalues(S Vafer2 200 


query.exec("create table course (id int primarykey, name vchar, teacher vchar)"); 
query.exec("insert into course values(1,'Math', 'yafeilinux1')"); 
quenrymexec(w insert mito course values(2 Englrsn Vatenmbmux2 On 
querysexec( insert nantorcourse values(3. Computer -= yafeatamnux) yz 
neturn Erue, 


} 
#endif // CONNECTION_H 


在 这 里 建立 了 两 个 表 ” student 表 中 有 一 项 是 course ， 它 是 int 型 的 ， 而 course 表 的 主键 
也 是 int 型 的 。 如 果 要 将 course 项 和 course 表 进 行 关 联 ， 它 们 的 类 型 就 必须 相同 ， 一 定 要 注 
意 这 一 点 全 
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3 :更改 main.cpp 文件 内 容 如 下 : 


#include "mainwindow.h" 
#include <QApplication> 
#include "connection.h" 
ntemaan(ant ange cnarm “argvl) 


{ 
QApplication a(argc, argv); 
if(!createConnection()) return 1; 
Mainwindow w; 
w. show( ); 
return a.exec(); 

} 


4 然后 到 mainwindow.h 文件 中 ， 先 包含 头 文件 : 


#include<QSqlRelationalTableModel> 


然后 添加 private 类 型 对 象 声 明 : 


QSqlRelationalTableModel *model; 


5 到 设计 模式 ， 往 界面 上 拖 放 一 个 Table View 部 件 。 


6 到 mainwindow.cpp 文件 中 ， 在 构造 函数 里 添加 如 下 代码 : 


model = new QSqlRelationalTableModel(this); 

// 属 性 变化 时 写 入 数据 库 

model->setEditStrategy(QSqlTableModel: :OnFieldchange); 

model- >setTable("student"); 

// 将 student 表 的 第 三 个 属性 人 1 没 为 course 表 的 id 属 性 的 外 键 ， 

// 并 将 其 显示 为 Course 表 的 name 属 性 的 值 
model->setRelation(2,QSqlRelation("course", "id", "name")); 
model->setHeaderData(0, Qt::Horizontal, QObject::tr("ID")); 
model->setHeaderData(1, Qt::Horizontal, QObject::tr("Name")); 
model->setHeaderData(2, Qt::Horizontal, QObject::tr("Course")); 
model->select( ); 

ui->tableView->setModel(model); 





这 里 修改 了 model 的 提交 策略 ， onFieldchange 表示 只 要 属性 被 改动 就 马上 写 入 数据 库 ， 这 样 
就 不 需要 我 们 再 执行 提交 函数 了 。 setRelation() 函数 实现 了 创建 外 键 ， 注 意 它 的 格式 就 行 
字 


7 . 运行 程序 ， 效 果 如 下 图 所 示 。 
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可 以 看 到 course 属性 已 经 不 再 是 编号 ， 而 是 具体 的 课程 了 。 关 于 外 键 ， 大 家 也 应 该 有 一 定 的 
认识 了 吧 ， 说 简单 点 就 是 将 两 个 相关 的 表 建 立 一 个 桥梁 ， 让 它们 关联 起 来 。 


二 、 使 用 委托 


有 时 我 们 也 希望 ， 如 果 用 户 更 改 课程 属性 ， 那 么 只 能 在 课程 表 中 有 的 课程 中 进行 选择 ， 而 不 

能 随意 填写 课程 。Qt 中 还 提供 了 一 个 QsqlRelationalDelegate 委托 类 ， 它 可 以 

为 QSqlRelationalTableModel 显示 和 编辑 数据 。 这 个 委托 为 一 个 外 键 提供 了 一 个 QComboBox 部 
件 来 显示 所 有 可 选 的 数据 ， 这 样 就 显得 更 加 人 性 化 了 。 使 用 这 个 ee ? ee 

在 mainwindow.cpp 文件 中 添加 头 文件 #include <QSqlRelationalDelegate> ， 然 后 继续 在 构造 函 

数 中 添加 如 下 一 行 代码 : 


ui->tableView->setItemDelegate( 
new QSqlRelationalDelegate(ui->tableView)); 


运行 程序 ， 效 果 如 下 图 所 示 。 


国有 EP phTlo, 





Hame Course 


vafeiD Enelish 
vafeil Eanes ~ 


yafel2 














我 们 可 以 根据 自己 的 需要 来 选择 使 用 哪个 模型 。 如 果 熟 悉 SQL 语 法 ， 又 不 需要 将 所 有 的 数据 
都 显示 出 来 ， 那 么 只 需要 使 用 QsqlQuery 就 可 以 了 。 对 于 QsqlTableModel ， 它 主要 是 用 来 显 
示 一 个 单独 的 表格 的 ， 而 QsqlQueryModel 可 以 用 来 显示 任意 一 个 结果 集 ， 如 果 想 显示 任意 一 
个 结果 集 ， 而 且 想 使 其 可 读 写 ， 那 么 建议 子 类 化 QsqlQueryModel ， 然 后 重新 实 

现 flags() 和 setpata() 函数 。 更 多 相关 内 容 请 查看 《Qt Creator 快 速 入 门 》 第 17 章 。 


涉及 到 的 源码 下 载 


第 27 篇 XML (一 ) 使 用 DOM 读 取 XML 文 档 


导语 XML(ExtensibleMarkup Language， 可 扩展 标记 语言 )， 是 一 种 类 似 于 HTML 的 标记 语 
言 ， 但 它 的 设计 目的 是 用 来 传输 数据 ， 而 不 是 显示 数据 。XML 的 标签 没有 被 预定 义 ， 用 户 需 
要 在 使 用 时 自行 进行 定义 。 XML 是 W3C (万 维 网 联盟 ) 的 推荐 标准 。 相 对 于 数据 库 表格 的 二 
维 表 示 ，XML 使 用 的 树 形 结构 更 能 表现 出 数据 的 包含 关系 ， 作 为 一 种 文本 文件 格式 ，XML 简 
单 明了 的 特性 使 得 它 在 信息 存储 和 描述 领域 非常 流行 。 


在 Qt 中 提供 了 QtXml 模 块 来 进行 XML 文档 的 处 理 ， 我 们 在 Qt 帮助 中 输入 关键 字 QtXml 
Module， 可 以 看 到 该 模块 的 类 表 。 这 里 主要 提供 了 三 种 解析 方法 : DOM 方 法 ， 可 以 进行 读 
写 ; SAX 方 法 ， 可 以 进行 读 取 ; 基于 流 的 方法 ， 分 别 使 

用 QXmlStreamReader 和 QXmlStreamwriter 进行 读 取 和 写 入 。 要 在 项 目 中 使 用 QtXml 模块 ， 还 
需要 在 项 目 文件 ( .pro 文件 ) 中 添加 QT += xml 一 行 代码 。 这 一 节 我 们 先 来 讲解 一 下 DOM 
的 方法 。 


环境 : Windows Xp + Qt 4.8.4+QtCreator 2.6.2 


目录 


。 一 、XML 文 档 示 例 
e 二 、 使 用 DOM 读 取 XML 文 档 内 容 


正文 
一 、XML 文 档 示 例 


下 面 是 一 个 规范 的 XML 文档 : 


<?xml1 version="1.0" encoding="UTF-8"?> 
<library> 
<book id="01"> 
<title>Qt</titles 
<author>shiming</author> 
</book> 
<book id="02"> 
<title>Linux</title> 
<author>yafei</author> 
</book> 
</library> 


每 个 XML 文档 都 由 XML 说 明 (或 者 称 为 XML 序 言 ) 开始 ， 它 是 对 XML 文档 处 理 的 环境 和 要 求 
的 说 明 ， 比 如 这 里 的 <?xmlversion="1.0" encoding="UTF-8"?> ， 其 中 xml version=”1.0” ， 表 
明 使 用 的 XML 版 本 号 ， 这 里 字母 是 区 分 大 小 写 的 ; encoding=“UTF-8” 是 使 用 的 编码 ， 指 出 文 
档 是 使 用 何 种 字符 集 建立 的 ， 默 认 值 为 Unicode 编 码 。XML 文 档 内 容 由 多 个 元 素 组 成 ， 一 个 元 
素 由 起 始 标签 < 标签 名 > 和 终止 标签 </ 标 签名 > 以 及 两 个 标签 之 间 的 内 容 组 成 ， 而 文档 中 第 一 个 


元 素 被 称 为 根 元 素 ， 比 如 这 里 的 <library></Library> ，XML 文 档 必 须 有 且 只 有 一 个 根 元 素 。 
元 素 的 名 称 是 区 分 大 小 写 的 ， 元 素 还 可 以 瞪 套 ， 比 如 这 里 

的 library 、 book 、 title 和 author 等 都 是 元 素 。 元 素 可 以 包含 属性 ， 用 来 描述 元 素 的 相 
关 信 息 ， 属 性 名 和 属性 值 在 元 素 的 起 始 标签 中 给 出 ， 格 式 为 < 元 素 名 属性 名 =“ 属 性 值 "> ， 

如 <book id=“61”> ， 属 性 值 必 须 在 单 引 号 或 者 双 引 号 中 。 在 元 素 中 可 以 包含 子 元 素 ， 也 可 以 
只 包含 文本 内 容 ， 比 如 这 里 的 <title>Qt</title> 中 的 Qt 就 是 文本 内 容 。 


二 、 使 用 DOM 读 取 XML 文 档 内 容 


Dom (Document Object Model， 即 文档 对 象 模型 ) 把 XML 文档 转换 成 应 用 程序 可 以 遍历 的 树 
形 结构 ， 这 样 便 可 以 随机 访问 其 中 的 节点 。 它 的 缺点 是 需要 将 整个 XML 文档 读 入 内 存 ， 消 耗 
内 存 较 多 。 


在 Qt 中 使 用 QpomprocessingInstruction 类 来 表示 XML 说 明 ， 元 素 对 应 QDomElement 类 ， 属 性 
对 应 QDomAttr 类 ， 文 本 内 容 由 QDomText 类 表示 。 所 有 的 DOM 节 点 ， 比 如 这 里 的 说 明 、 元 
素 属性 和 文本 等 2 都 使 用 QDomNode 来 表示 ， 然 后 使 用 对 应 

的 isProcessingInstruction() 、 isElement() 、 isAttr() 和 isText() 等 函数 来 判断 是 否 是 
该 类 型 的 元 素 ， 如 果 是 ， 那 么 就 可 以 使 

用 toProcessingInstruction() 、 toEljement() 、 toAttr() 和 toText() 等 函数 转换 为 具体 的 
节点 类 型 。 


下 面 来 演示 一 个 例子 ， 将 读 取 前 面 介绍 的 XML 文 档 的 内 容 。 
1 新 建 Qt 控制 侣 应用， 项 目 名 称 为 myDom 。 


2 完成 后 打开 myDom.pro 项 目 文件 ， 将 第 一 行 代码 更 改 为 : 


QT += Core xml 


然后 保存 该 文件 。 


3 . 打开 main.cpp 文件 ， 更 改 内 容 如 下 : 


第 27 篇 XML (一 ) 使 用 DOM 读 取 XML 文 档 


#include <QCoreApplication> 
#include <QtXm]> 


int main(int argc, char *argv[]) 


{ 
QCoreApplication a(argc, argv); 
// 新 建 QDomDocument 类 对 象 ， 它 代表 一 个 XML 文档 
QDomDocument doc; 
// 建立 指向 “my .xm1” 文 件 的 QFile 对 象 
QFile file("my.xml"); 
WX 法 方 式 打 开 
If (!file.open(QIODevice::Readonly)) return 0; 
// 将 文件 内 容 读 到 doc 中 
If (l!doc.setContent(&file)) 
ialerclose( ,return os 
XX 关闭 文件 
file.close( 六 
// 获得 doc 的 第 一 个 节点 ， 即 XML 说 明 
QDomNode firstNode = doc,firstCchild()， 
// 输出 XML 说 明 
qDebug() << firstNode.nodeName() << firstNode.nodevalue() ; 
return a exec(),; 
} 


4 然后 先 点 击 一 下 Qt Creator 堪 下 角 的 锤子 图 标 来 构建 项 目 ， 这 样 会 在 源码 目录 旁 生 成 构建 
目录 ， 比 如 这 里 是 myDom-build- 桌 面 -Debug ， 我 们 进入 该 目录 ， 然 后 新 建 一 个 文本 文档 ， 如 下 
图 所 示 。 


入 myDom-build- 泉 面 -Debug 
立 件 三) 编辑 付 ) 查看 名 ”收藏 入 工具 民 ) 帮助 


人 @ 担 - 日 : 访 人 坟 这 芒 及 国 - 了 V 且 


地 址 @} | E: hmyDom-build- 虚 面 -Debug 


人 


文件 和 文件 支 任务 [ 国 加 ee 加 se 











~ NN Nakefile. Debug NN Wakefile Release 
DEBUG 文件 RELEASE 文件 
5 5 I 


类 型 : 交 本 交 档 修改 日 期 : 2013-5-20 16:17 大 小 : 0 字 节 





下 面 将 其 文件 名 更 改 为 my.xml， 注 意 一 定 要 更 改 扩 展 名 ， 一 些 电脑 中 扩展 名 可 能 自动 隐藏 
了 ， 可 以 去 “工具 -文件 夹 选项 -查看 "中 修改 。 提 示 信 息 选择 "是 " 即 可 。 如 下 图 所 示 。 
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第 27 篇 XML (一 ) 使 用 DOM 读 取 XML 文 档 


徊 7Doa-build- 齐 面 -Debug 
他 件 企 】 编辑 应 ) 查看 他 ”收藏 古 ) 工具 位 帮助 好 


人 O 提 -加 -让 记述 这 这 营 xf# 天 国 区 由 


地 址 9} | 四 F: AmyDom-build- 点 面 -Debug 


文件 和 文件 来 任务 [一 NY Merile 











如 果 改 变 交 件 扩展 名 ,可 能 会 导致 交 件 不 可 用 。 
确实 要 更 改 吗 ? 


天 加 ) 





类 型 : 文本 立 档 修改 日 期 : 2013-5-20 16:17 大 小 : 0 字 节 0 字 节 | 是 我 的 电脑 


更 改 完 成 后 使 用 记事 本 打开 my.xml 文件 ， 然 后 将 前 面 的 xml 文 档 内 容 添加 进去 ， 保 存 退 出 即 
可 。 如 下 图 所 示 。 


加 ny. xnl 一 亿 事 本 
文件 下 ) 编辑 应 ) 格式 上 ) 查看 名 帮助 
<?xml version="1.8" encoding="UTF-8""?> 
<1library> 
《book id="61"> 
<title>Qt</title> 
<author>shiming</author> 
《book> 
《book id="62"> 
<title>Linux</title> 
《author>uyafei<yauthor> 
<7book> 
《zy1ibraruyy> 





Na ye 


5. 现在 运行 程序 ， 效 果 如 下 图 所 示 。 
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"xm1”"uekhsion=' 1 -9 encodqding=:UTE-87 








如 果 大 家 不 愿意 看 到 字符 串 两 边 的 引号 ， 可 以 将 源码 中 得 qpebug() 语句 更 改 如 下 : 


qDebug() << qPrintable(firstNode.nodeName()) 
<< qPrintable(firstNode.nodeValue( )); 


运行 程序 ， 效 果 如 下 图 所 示 。 


[3 Eo si ET Ts i tM 








6 .下 面 在 main() 函数 的 return a.exec(); 一 行 代码 前 继续 添加 如 下 代码 : 


QDomEJement docElem = doc.documentElement(); 
QDomNode n = docElem.firstCchild(); 


(!n.isNull()) 


{ 
(n.isElement()) 
QDomElement e = n.toElement(); 
qDebug() << qPrintable(e.tagName()) 
<< qPrintable(e.attribute("id")); 
} 
n = n.nextSibling(); 
} 


这 里 使 用 了 firstchild() 函数 和 nextsibling() 函数 ， 然 后 利用 while() 循环 来 实现 对 所 有 
子 元 素 的 人 遍历。 运行 程序 ， 效 果 如 下 图 所 示 。 


encoding=’UTF-—8’ 








7 下 面 更 改 源码 中 得 if() 语句 的 内 容 ， 输 出 所 有 子 节点 的 内 容 : 


(n.isElement()) 


QDomEJement e = n.toElement(); 
qDebug() << qPrintable(e.tagName()) 
<< qPrintable(e.attribute("id")); 


QDomNodeList list = e.childNodes(); 
( i=0; i<list.count(); i++) 


QDomNode node = list.at(i); 
(node.isElement()) 
qDebug() << " " << qPrintable(node.toElement().tagName()) 
<<qPrintable(node.toElement().text()); 


ee 了 childNodes() 骂 数 获得 了 元 素 所 有 子 节点 的 列表 ， 然 后 通过 人 遍历 这 个 列表 实现 了 
其 所 有 子 元 素 。 运 行程 序 ， 效 果 如 下 图 所 示 。 


xml version=’1.8’ encoding=’UTF-8’ 
book Bl1 

title Qt 

authohr Shiming 
book 02 


title Linux 
author vafei 








通过 上 面 的 例子 ， 我 们 实现 了 对 一 个 XML 文档 的 读 取 。 可 以 看 到 ， 在 Qpom 中 ， 是 将 整个 XML 
文件 读 到 内 存 中 的 doc 对 象 中 的 。 然 后 使 用 节点 ( QDomNode ) 操作 doc 对 象 ， 像 XML 说 

明 ， 元 素 ， 属 性 ， 文 本 等 等 都 被 看 做 是 节点 ， 这 样 就 使 得 操作 XML 文档 变 得 很 简单 ， 我 们 只 
需 通过 转换 函数 将 节点 转换 成 相应 的 类 型 ， 如 


QDomEJement e =n.toElement(); 


在 下 一 节 我 们 将 讲述 XML 文件 的 创建 和 写 入 。 


涉及 到 的 源码 


第 28 篇 XML (二 ) 使 用 DOM 创 建 和 操作 XML 文档 


导语 
在 上 一 节 中 我 们 用 手写 的 方法 建立 了 一 个 XML 文档 ， 并 且 用 DOM 的 方法 对 其 进行 了 读 取 。 现 
在 我 们 使 用 代码 来 创建 那个 XML 文档 ， 并 且 对 它 实 现 查找 、 更 新 、 播 入 等 操作 。 


环境 : Windows Xp + Qt 4.8.4+QtCreator 2.6.2 


目录 


。 一 、 创 建文 档 
e@ 二 、 读 取 文 档 
e@ 三、 添加 节点 
。 四、 查找、 删除 、 更 新 操作 


下 忌 

一 、 创 建文 档 

1 新 建 Qt Gui 应 用 ， 项 目 名 称 为 mypom 2 ， 基 类 为 QMainwindow ， 类 名 为 Mainwindow 。 
2 完成 后 打开 myDom_2.pro ， 然 后 将 第 一 行 代码 更 改 为 : 


QT += Core gui xml] 


保存 该 文件 。 


3 双击 mainwindow.ui 进入 设计 模式 ， 往 界面 上 添 
加 Push Button ， Label ， Line Edit ， List widget 等 部 件 ， 设 计 界 面 如 下 图 所 示 。 


第 28 篇 XML (二 ) 使 用 DOM 创 建 和 操作 XML 文档 





4 完成 后 ， 打 开 mainwindow.cpp 文件 . 先 包 含 头 文件 #include <QtXml> ， 然后 在 构造 函数 中 
添加 如 下 代码 : 
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QFile f 
VR nA 所 
if(!file.open(QIODevice: i | QIODevice::Truncate)) return ， 





义 前 的 


QDomDocument doc; 

QDomProcessingInstruction instruction; /7/ 添 如 处 理 指令 

instruction = doc.createProcessingInstruction("xml","version=\"1.0\"encoding=\"UTF-8\"" 
) ; 

doc.appendchild(instruction); 

QDomEJement root = doc. eG 

doc.appendChild(root); // 添 加 良 


计 


// 添加 第 一 个 book 元 素 及 其 子 元 素 
QDomElement book = doc.createElement(tr(" 图 书 ")); 
QDomAttr id = doc.createAttribute(tr(" 编 号 ")); 
QDomElement title = doc.createElement(tr(" 书 名 ")); 
QDomElement author = doc.createElement(tr(" 作 者 ")); 
QDomText text,; 

id.setValue(tr("1")); 

book.setAttributeNode(id); 

text = doc.createTextNode(tr("Qt")); 
title.appendCchild( text); 

text = doc.createTextNode(tr("shiming")); 

author .appendChild( text); 

book.appendCchild(title); 

book.appendCchild(author); 

root ,appendchild(book) ; 


// 添加 第 二 个 book 元 素 及 其 子 元 素 

book = doc. i 
id = doc.createAttribute(tr(" 编 号 "))，; 
title = doc.createElement(tr(" 书 名 ")); 
author = doc.createElement(tr(" 作 者 ")); 
id.setValue(tr("2")); 
book.setAttributeNode(id); 

text = doc.createTextNode(tr("Linux")); 
title.appendCchild( text); 

text = doc.createTextNode(tr("yafei")); 
author .appendChild( text ); 
book.appendCchild(title); 
book.appendchild(author); 
root.appendChild(book); 


QTextStream out(&file); 
doc.save(out,4); // 将 文档 保存 到 文件 ，4 为 子 元 素 缩 进 字 符 数 
file.close(); 


ES 到 


这 里 先 使 用 Qpompocument 类 在 内 存 中 生成 了 一 棵 DOM 树 ， 然 后 调用 save() 函数 利 

用 QTextstream 文本 流 将 DOM 树 保存 在 了 文件 中 。 在 生成 DOM 树 时 主要 使 用 

了 createElement() 等 函数 来 生成 各 种 节 ， 点 ， 然 后 使 用 appendCchild() 将 各 个 节点 依次 追加 进 
去 。 


5 打开 main.cpp 文件 ， 先 包含 头 文件 : #include <QTextcodec> ， 然 后 在 main() 函数 第 一 
行 代码 后 面 添加 如 下 代码 : 


QTextCcodec: :setCcodecForTr(QTextCcodec: :codecForName("utf8")); 


6 运行 程序 ， 可 以 看 到 在 构建 目录 中 生成 了 my.xml 文件 ， 可 以 双击 查看 该 文件 的 内 容 ， 效 
果 如 下 图 所 示 。 


第 28 篇 XML (二 ) 使 用 DOM 创 建 和 操作 XML 文档 


后 了 7Doa_2-buaild- 卓 面 =-Debug 


文件 外 ) ”编辑 让) 查看 六 ”收藏 征 ) 工具 让) 帮助 4 re a 一 后 | 必 l 
2—builtc (ote Yep. 1。。。 | 号 | XK 


全 请 四 © s 店 万 国 E> | 区 JS | 国 EnyDon_2-build-g YX | | 图 百度 搜索 
地 直上) | 回 myDom_2-build- 槛 面 -Debug 文件 F) ”编辑 下 ) 查看 WW ”收藏 严 忆 ) 工具 (I) 帮助 0 
帘 收 藏 严 | 次 居 网 页 快讯 库 > 


籁 E myDon_2-build- 旧 . 加 偷 - -局 另 - 























<?xml version="1.0" encoding="UTF-8" ?> 
- < 书库 > 
- < 图 书 编号 ="1"> 
< 书 名 >Qt</ 书 名 > 
< 作者 >shiming </ 作 者 > 
</ 图 书 > 
- < 图 书 编号 ="2"> 
< 书 名 >Linux</ 书 名 > 
< 作者 >yafei</ 作 者 > 
</ 图 书 > 
</ 书 库 > 


| 一 | 到 look 7 ,;; 
类 型 : XWL 文档 修改 日 期 : 2013-5-21 9:08 大 小 : 257 字 节 257 字 节 时 我 的 电脑 





二 、 读 取 文 档 


下 面 我 们 读 取 整个 文档 的 内 容 ， 并 显示 在 List Widget 部 件 上 面 ， 这 里 用 的 就 是 上 一 节 讲 到 的 
内 容 。 我 们 进入 “查看 全 部 信息 "按钮 单 击 信号 楷 ， 更 改 如 下 : 
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void Mainwindow: :on_pushButton_5_clicked() 


{ 


ui->listwidget->clear(); // 先 清空 显示 
QFTLe File mye xm 

If (!file.open(QIODevice::ReadOonly)) return ， 
QDomDocument doc; 

If (!doc.setContent(&file)) 


file.close(); 
neturmme 


file.close( ); 


// 返 回 根 节点 及 其 子 节点 的 元 素 标记 名 
QDomElement docElem = doc.documentElement(); // 和 返回 根 元 训 


QDomNode n = docElem.,firstchild();  // 返 回 根 节点 的 第 一 个 子 节点 
while( Iin.isNull()) // 如 果 节点 不 为 空 
{ 


if (n.isElement()) // 如 果 节 点 是 元 素 


QDomElement e = n.toElement(); // 将 其 转换 为 元 率 
ui->listwidget->addItem(e.tagName() 


e(tr(" 编 号 "))); 
QDomNodeList list = e.childNodes(); 
for(int i=0; i<list.count(); i++) 


QDomNode node = list.at(i); 
if(node.isElement()) 
ui->listwidget->addItem(" 册 


t().tagName() 
+" : "+node.toElement().text()); 


-wad 


=mnnextsioling() XXT = 个 见 计 信访 


运行 程序 ， 效 果 如 下 图 所 示 。 


| EP phTln, 








: Qt 


: shiming 








: Linux 
: yafel 














三 、 添 加 节点 


+e.attribut 


+node.toElemen 


1 首先 在 设计 模式 ， 把 书 名 和 作者 标签 后 面 的 Line Edit 部 件 的 objectName 分 别 更 改 
为 lineEdit_title 和 1ineEdit author 。 如 下 图 所 示 。 





lineEdit book : QLineEdit 
属性 值 


Br Tr i ne di ti tlel | 
2. 然后 进入 添加 按钮 的 单 击 信号 柳 ， 添 加 如 下 代码 : 


void Mainwindow: :on_pushButton_4 clicked() 









{ 
ui->listwidget->clear(); // 我 们 先 清空 显示 ， 然 后 显示 “无 法 添加 1” 
ui->listwidget->addItem(tr(" 无 法 添加 1")); 
QF TLe friLe( my xmb ), 
If (!file.open(QIODevice::ReadOonly)) return; 
QDomDocument doc; 
If (!doc.setContent(&file)) 
file.close(); 
Returny 
} 
file.close(); 
QDomElement root = doc.documentElement(); 
QDomElement book = doc.createElement(tr(" 图 书 ")); 
QDomAttr id = doc.createAttribute(tr(" 编 号 ")); 
QDomElement title = doc.createElement(tr(" 书 名 ")); 
QDomElement author = doc.createElement(tr(" 作 者 ")); 
QDomText text,; 
// 我 们 获 1 个 孩子 结 点 的 编号 ， 然 后 加 1， 便 是 新 的 编号 
QString num = root.lastCchild(). US SCD 
int count = num.toInt() +1; 
id. setVvalue(QString: :number (count )); 
book.setAttributeNode(id); 
text = doc.createTextNode(ui->lineEdit title->text()); 
title.appendChild( text); 
text = doc.createTextNode(ui->lineEdit author->text()); 
author .appendChild( text); 
book.appendChild(title); 
book.appendCchild(author ) ; 
root .appendchild(book ) ; 
If(!file.open(QIODevice: :Writeonly | QIODevice::Truncate ) ) 
returm, 
QTextSstream out(&file),; 
doc.save(out,4); ”// 将 文档 保存 到 文件 ，4 为 子 元 素 缩 进 字 符 数 
file.close(); 
ui->listwidget->clear(); // 最 后 更 改 显 示 为 “添加 成 功 17 
ui->1istwidget->addItem(tr( "添加 成 功 1")); 


闭 。 我 们 将 新 的 节点 加 入 到 最 后 


这 里 先 用 只 读 方 式 打 开 XML 文 件 ， 将 其 读 入 doc 中 ， 然 后 关 1 
我 们 再 用 只 号 的 方式 打开 XML 文 
示 “。 


面 ， 并 使 其 “编号 "为 以 前 的 最 后 一 个 节点 的 编号 加 1。 最 
件 ， 将 修改 完 的 doc 写 入 其 中 。 运 行程 序 ， 效 果 如 下 图 


闫 
后 
所 


第 28 篇 XML (二 ) 使 用 DOM 创 建 和 操作 XML 文档 


国有 EPRN pliTlo, 辐 回 因 
ED 
图 书 编号 : 








书 名 : nt Creator 快 速 入 门 | 











作者 : |yafeilinmx 











有 下 二 iTm 丰 imdo 豆 加 回国 





pe :et 
图 书 编号 : : shiming 
et | : yafei 


: Qt _ Creator 快速 六 门 


: yatelllirmux 








书 名 : Qt Creator 快 速 入 门 | 








作者 : |yafeilinax ] 

















四 、 查 找 、 删 除 、 更 新 操作 
因为 这 三 个 功能 都 要 先 利 用 “编号 "进行 查找 ， 所 以 我 们 放 在 一 起 实现 。 
1 首先 将 界面 上 “图 书 编号 "后 面 的 Line Edit 部 件 的 opjectName 更 改 为 lineEdit id 。 


2 .在 mainwindow.h 文件 中 添加 public 类 型 的 函数 声明 : 


void doxmlL(constQString operate); 


我 们 使 用 这 个 函数 来 完成 三 种 不 同 的 操作 ， 根 据 参数 来 判断 不 同 的 操作 。 
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然后 到 mainwindow.cpp 中 添加 该 函数 的 定义 : 


void Mainwindow: :doXml(const QString operate) 
{ 
ui->listwidget->clear(); 
ui->listwidget->addItem(tr(" 没 有 找到 相关 内 容 | ")); 
QFTLe file( my xml ye 
If (!file.open(QIODevice::ReadOonly)) return ，; 
QDomDocument doc; 
If (!doc.setContent(&file)) 
{ 
file.close(); 
Ben 


file.close(); 


QDomNodeList list = doc.elementsByTagName(tr(" 图 书 ")); 
// 以 标签 名 进行 查找 
onm(Lne =0 <lnseecounc +r) 
{ 
QDomElement e = 1ist., at (i). Eomeme ni 
// 如 果 元 素 的 “编号 ”属性 值 与 我 们 所 查 的 相同 
工人 (es er ULC Cd == Ui->lineEdit_id->text()) 





元 本 2 . I 
// 如 果 元 素 的 “编号 ”属性 值 与 我 们 所 查 的 相同 


if(operate == pe )  // 如 果 是 删除 操作 





QDomElement root = doc.documentElement(); 

root,removeCchild(1list.at(i)); ”// 从 根 节点 上 删除 该 

QFile file("my.xml"); // 保 存 更 改 
if(!file.open(QIODevice: :WriteOnly | QIODevice::Truncate)) 

return » 

QTextStream out(&file); 

doc.save(out, 4); 

file.close(); 

ui->listwidget->clear(); 

ui->listwidget->addItem(tr(" 删 除 成 功 ! ")); 





else if(operate == "update") // 如 果 是 更 新 操作 


QDomNodeList child = DS Ot he NP ue S(O 

// 找 到 它 的 所 有 子 节 上 点， 就 是 “ 书 名 ”和 “作者 ” 

0 
text( )); 

// 将 它 子 节 点 的 首 个 子 节点 (就 是 文本 节点 ) 的 内 容 更 新 

child.at(1).toElement().firstCchild().setNodeVvalue(ui->lineEdit author- 
>text()); 

QFiLe file( mY Xm // 保 存 更 改 

if(!file.open(QIODevice::WriteOonly | QIODevice::Truncate)) 
return ， 

QTextStream out(&file); 

doc.save(out,4);  ”// 保 存 文档 ，4 为 子 元 

file.close(); 

ui->listwidget->clear(); 

ui->listwidget->addItem(tr(" 更 新 成 功 ! ")); 





else if(operate == "find") // 如 果 是 查找 操作 


ui->listwidget->clear(); 
ui->listwidget->addItem(e.tagName()+e.attribute(tr(" 编 号 "))); 
QDomNodeList list = e.childNodes(); 

for(int i=0; i<list.count(); I++) 


QDomNode node = list.at(i); 
if(node.isElement()) 
ui->listwidget->addItem(" "+node.toElement().tagName() 
+" : "+node.toElement().text()); 


第 28 篇 XML (二 ) 使 用 DOM 创 建 和 操作 XML 文档 


4 .下面 我 们 分 别 进 入 "查找 ”，" 删 除 ”， “更 新 "三 个 按钮 的 单 击 信号 楷 ， 更 改 如 下 : 


/7/ 查找 
void Mainwindow: :on_pushButton_clicked() 


doxm1l("find"); 
} 


2 删除 除 
void Mainwindow: :on_pushButton_2_clicked() 


doxml("delete" ) ; 
} 


// 更 新 void 
Mainwindow: :on_pushButton_3_clicked() 


doxml("update"); 


下 面 运 行程 序 ， 查 找 操作 结果 如 下 图 所 示 。 








: shiming 





























然后 对 编号 为 1 的 图 书 进行 更 新 ， 效 果 如 下 图 所 示 。 
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第 28 篇 XML (二 ) 使 用 DOM 创 建 和 操作 XML 文档 


国有 Eph plit 


: 





然后 进行 删除 操作 ， 如 下 图 所 示 。 
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第 28 篇 XML (二 ) 使 用 DOM 创 建 和 操作 XML 文档 


| EPRN pliTln, 





删除 后 再 次 查询 所 有 内 容 。 效 果 如 下 图 所 示 。 
| EER pliTilo, 


| 
书 名 : Linux 
作者 : yafei 





结语 


通过 本 节 的 例子 可 以 看 到 使 用 DOM 可 以 很 方便 的 进行 XML 文档 的 随机 访问 ， 这 也 是 它 最 大 的 
优点 。 关 于 更 多 更 详细 的 内 容 可 以 参考 《Qt Creator 快 速 入 门 》 的 相关 章节 。 


涉及 到 的 源码 
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第 29 篇 XML (三 ) Qt 中 的 SAX 


导语 我 们 前 面 讲述 了 用 DOM 的 方法 对 XML 文档 进行 操作 ，DOM 实 现 起 来 很 灵活 ， 但 是 这 样 
也 就 使 得 编程 变 得 复杂 了 些 ， 而 且 我 们 前 面 也 提 到 过 ，DOM 需 要 预先 把 整个 XML 文档 都 读 入 
内 存 ， 这 样 就 使 得 它 不 适合 处 理 较 大 的 文件 。 下 面 我 们 讲述 另 一 种 读 取 XML 文 档 的 方法 ， 即 
SAX 。 是 的 ， 如 果 你 只 想 读 取 并 显示 整个 XML 文 档 ， 那 么 SAX 是 很 好 的 选择 ， 因 为 它 提供 了 
比 DOM 更 简单 的 接口 ， 并 且 它 不 需要 将 整个 XML 文 档 一 次 性 读 入 内 存 ， 这 样 便 可 以 用 来 读 取 
较 大 的 文件 。 我 们 对 SAX 不 再 进行 过 多 的 介绍 ， 因 为 不 需要 任何 基础 ， 你 就 可 以 掌握 我 们 下 
面 要 讲 的 内 容 了 。 如 果 大 家 对 SAX 有 兴趣 ， 可 以 到 网 上 查找 相关 资料 。 


环境 : Windows Xp + Qt 4.8.4+QtCreator 2.6.2 
目录 一 、 解 析 器 解析 流程 二 、 使 用 SAX 读 取 文 档 
正文 

一 、 解 析 器 解析 流程 


在 Qt 的 Qtxml 模块 中 提供 了 一 个 QxmlsimpleReader 的 类 ， 它 便 是 基于 SAX 的 XML 解 析 器 。 这 
个 解析 器 是 基于 事件 的 ， 但 这 些 事件 由 它们 自身 进行 关联 ， 我 们 并 不 需要 进行 设置 。 我 们 只 
需 知道 ， 当 解析 器 解析 一 个 XML 的 元 素 时 ， 就 会 执行 相应 的 事件 ， 我 们 只 要 重 写 这 些 事件 处 
理 函 数 ， 就 能 让 它 按照 我 们 的 想法 进行 解析 。 


比如 要 解析 下 面 的 元 素 : 


<title>Qt</title> 


解析 器 会 依次 调用 如 下 事件 处 理 函 数 : startElement() ， characters() ? endElement() 。 我 
们 可 以 在 startElement() 中 获得 元 素 名 (如 title”) 和 属性 ， 在 characters() 中 获得 元 素 中 的 
文本 (如 “Qt*) ， 在 endElement() 中 进行 一 些 结束 读 取 该 元 素 时 想 要 进行 的 操作 。 而 所 有 的 
这 些 事件 处 理 函 数 我 们 都 可 以 通过 继承 QxmlDefaultHandler 类 来 重 写 。 


二 、 使 用 SAX 读 取 文 档 

1 新 建 其 他 项 目 分 类 中 的 空 的 Qt 项 目 ， 项 目 名 称 为 mySAX 。 

2 . 完成 后 向 项 目 中 添加 新 的 C++ 类 ， 类 名 为 MySAX ， 基 类 圭 写 QxmlDefaultHandler 。 
3 . 然后 再 添加 一 个 main.cpp 文件 。 

4 . 先 打开 mysAX.pro 文件 ， 添 加 一 行 代码 : QT+= xml ， 然 后 保存 该 文件 。 


5. 打开 mysax.h 文件 ， 将 其 内 容 更 改 为 : 


#ifndef MYSAX_H 
#define MYSAX_H 


#include <QXmlDefaultHandler> 
class QListWwidget; 


class MySAX : public QXmlDefaultHandler 


publncs 

MySAX( ); 

~MySAX( ); 

bool readFile(const QString &fileName); 
protected: 
bool startElement(const QString &namespaceURI, 
const QString &localName, 

const QString &qName, 
const QXmlAttributes &atts); 
bool endElement(const QString &namespaceURI, 
const QString &localName, 
const QString &qName ) ; 

bool characters(const QString &ch ) ， 

bool fatalError(const QXmlParseException &exception); 
private: 

QListwWidget *]ist; 

QString currentText; 


}; 


#endif // MYSAX_H 


这 里 主要 是 重新 声 明了 QXmlDefaultHandler 类 

的 startElement() 、 endElement() 、 characters() 和 fatalError() 几 个 函 

数 ， readFile() 函数 用 来 读 入 XML 文件 ， QListwidget 部 件 用 来 显示 解析 后 的 XML 文档 内 
容 ， currentText 字符 串 变 量 用 于 暂 存 字符 数据 。 


6. 打开 mysax.cpp 文件 ， 将 其 内 容 修改 如 下 : 


#include "mysax.h" 
#include <QtXm]> 
#include <QListwidget> 


MySAX: :MySAX( ) 

{ 
list = new QListWwidget,; 
list->show(); 

} 

MySAX: :~MySAX( ) 


delete, 11sSt,; 
} 
bool MySAX: :readFile(const QString &fileName) 
{ 

QFTLe > file(ftileName), 


// 读 取 文件 内 容 
QXmlInputSource inputSource(&file); 


// 建立 QXm1lSimp1LeReader 对 象 
QXmlSimpleReader reader; 


// 设置 内 容 处 理 器 
reader .SetContentHandler(this ) ; 


// 设置 错误 处 理 器 


reader .setErrorHandler (this); 


// 解析 文件 
return reader.parse(inputSource); 






} 


I SN i 起 区 
bool MySAX: ee QString &namespaceURI, 
const QString &localName, 
const QString &qName, 
const QXmlAttributes &atts) 









if (qName == "library") 
list->addItem(qName); 
else if (qName == "book") 
list->addItem(" "+ gqName + atts.value("id")); 
EeeurnEEIUe 
// 已 经 解析 完 一 块 字符 数据 
bool MySAX: :characters(const QString &ch) 
{ 
currentText = ch; 
returnetr ve, 
} 
VA SE 矿 完 一 个 元 素 的 结束 标签 


bool MySAX: he QString &namespaceURI, 
const QString &localName, 
const QString &qName) 


If (qName == "title" || gqName == "author") 
list->addItem(" "+ qName + " : "+ currentText); 
return Ene 
} 
// 错误 处 理 


bool MySAX: :fatalError(const QXmlParseException &exception) 


qDebug() << exception.message(); 
return false; 


这 几 个 函数 的 定义 。 在 readFile() 函数 中 ， 我 们 设置 了 文件 的 解析 过 程 。Qt 中 提供 
一 个 简单 的 XML 解析 器 QxmlsimpleReader ， 它 是 基于 SAX 的 。 该 解析 器 需 

QXmlInputSource 为 其 提供 数据 ， QxmlInputsource 会 使 用 相应 的 编码 来 读 取 XML 文 档 的 数 

据 。 在 进行 解析 之 前 ， 还 需要 使 用 setcontentHandler() 来 设置 事件 处 理 器 ， 使 

用 setErrorHandler() 来 设置 错误 处 理 器 ， 它 们 的 参数 使 用 了 this ， 表 明 使 用 本 类 作为 处 理 

器 ， 也 就 是 在 解析 过 程 中 出 现 的 各 种 事件 都 会 使 用 本 类 的 startElement() 等 事件 处 理 函 和 

进行 处 理 ， 而 出 现 错误 时 会 使 用 本 类 的 fatalError() 函数 来 处 理 。 最 后 ， 调 用 了 parse() 部 
数 来 进行 解析 ， 该 函数 会 在 解析 成 功 时 返回 true ， 否 则 返回 false 。 在 后 ms 
函数 中 ， 就 是 简单 的 将 数据 显示 在 QListwidget 中 。 


7 .最 后 打开 main.cpp 文件 ， 添 加 如 下 内 容 : 


#include "mysax.h" 
#include <QApplication> 
nt mazn(ant arge char” argv pl]) 


{ 
QApplication app(argc, argv); 
MySAX sax; 
sax.readFile("../mySAX/my .xml1"); 
return app.exec(); 

} 


8 将 前 面 第 27 篇 建立 的 my.xml 文件 复制 到 我 们 的 源码 目录 中 ， 然 后 运行 程序 ， 效 果 如 下 图 
所 示 。 


回回 因 


library 
bool0l 
title : Qt 
author : shiming 
bool02 
title : Lirux 
author : yafel 





可 以 看 到 使 用 SAX 方 法 来 解析 XML 文档 比 使 用 DOM 方 法 要 清晰 很 多 ， 更 重要 的 是 它 的 效率 要 
高 很 多 ， 不 过 SAX 方 法 只 适用 于 读 取 XML 文档 。 


涉及 到 的 源码 


第 30 篇 XML (四 ) 使 用 流 读 写 XML 
导语 


从 Qt 4.3 开 始 引 入 了 两 个 新 的 类 来 读 取 和 写 入 XML 文 

档 : QXmlStreamReader 和 QXmlStreamwriter ° QXmlStreamReader 类 提供 了 一 个 + 央 速 的 解析 器 
通过 一 个 简单 的 流 API 来 读 取 格 式 良好 的 XML 文档 ， 它 是 作为 Qt 的 SAX 解 析 器 的 替代 品 的 身份 
出 现 的 ， 因 为 它 比 SAX 解 析 器 更 快 更 方便 。 QxmlstreamReader 可 以 从 QIopevice 或 

者 QByteArray 中 读 取 数 据 。 流 读 取 器 的 基本 原理 就 是 将 XML 文 档 报 告 为 一 个 记号 (tokens) 
流 ， 这 一 点 与 SAX 相 似 ， 而 它们 的 不 同 之 处 在 于 XML 记号 被 报告 的 方式 。 在 SAX 中 ， 应 用 程 
序 必 须 提供 处 理 器 〈 回 调 函 数 ) 来 从 解析 器 获得 所 谓 的 XML 事件 ; 而 对 

于 QxmlstreamReader ， 是 应 用 程序 代码 自身 来 驱动 循环 ， 在 需要 的 时 候 可 以 从 读 取 器 中 一 个 
Re 。 这 个 是 通过 调用 readNext() 函数 实现 的 ， 它 可 以 读 取 下 一 个 记号 ， 然 后 
返回 一 个 记号 类 型 ， 然 后 可 以 使 用 isstartElement() 和 text() 等 函数 来 判断 这 个 记号 是 否 包 
含 我 们 Pe 息 。 使 用 这 种 主动 拉 取 记号 的 方式 的 最 大 的 好 处 就 是 可 以 构建 递归 解析 器 ， 
也 就 是 可 以 在 不 同 的 函数 或 者 类 中 来 处 理 XML 文 档 中 的 不 周记 号 。 


环境 : Windows Xp + Qt 4.8.4+Qt Creator2.6.2 


e 一 、 解 析 XML 文 档 


e@ 二 、 写 入 XML 文档 
正式 
一 、 解 析 XML 文 档 


1 新 建 Qt 控制 台 应 用 ， 项 目 名 称 为 myxmlstream ， 完 成 后 将 myxmlstream.pro 文件 的 第 一 行 
代码 更 改 为 : 


QT += Core xml 


然后 保存 该 文件 。 


2 然后 打开 main.cpp 文件 ， 将 内 容 更 改 如 下 : 


#include <QCoreApplication> 
#include <QFile> 
#include <QXmlStreamReader> 
#include <QXmlStreamWriter> 
#include <QDebug> 


int main(int argc, char *argv[]) 








{ 
QCoreApplication a(argc, argv); 
QFile file("../myXmLlStream/my. Xml™),; 
If (!file.open(QFile::ReadOonly | QFile::Text)) 
qDebug()<<"Error: cannot open file"; 
returmn i, 
} 
QXmlStreamReader reader; 
// 设置 文件 ， 这 时 会 将 流 设置 为 初始 状态 
reader setDevice(&file); 
// 如 果 没 有 读 到 文档 结尾 ， 而 且 没 有 出 现 错误 
while Cr atEnd()) { 
X77 法 取 下 一 个 N37 亿 扩 加 1 的 类 型 
QXmlStreamReader::TokenType type = reader.readNext(); 
// 下 面 便 记号 的 类 型 来 进行 不 同 的 输出 
If (type QXmlStreamReader::StartDocument) 
qDebug() << reader.documentEncoding() 
<< reader.documentVersion(); 
If (type == QXmlStreamReader::StartElement) { 
qDebug() << "<" << reader.name() << ">"， 
If (reader.attributes().hasAttribute("id")) 
qDebug() << reader.attributes().value("id"); 
If (type == QXmlStreamReader::EndElement) 
qDebug() << "</" << reader.name() << ">"， 
If (type == QXmlStreamReader::Characters 
&& !reader.iswhitespace()) 
dqDebug() << reader.text(); 
} 
// 如 果 读 取 过 程 中 出 现 错误 ， 那 么 输出 错误 信息 
If (reader.hasError()) { 
qDebug() << "error: " << reader.errorString(); 
file.close(); 
return a.exec(); 
} 


可 以 看 到 流 读 取 器 就 是 在 一 个 循环 中 通过 使 用 readNext() 来 不 断 读 取 记 号 的 ， 这 里 可 以 对 不 
同 的 记号 和 不 同 的 内 容 进 行 不 同 的 处 理 ， 既 可 以 在 本 函数 中 进行 ， 也 可 以 在 其 他 函数 或 者 其 
他 类 中 进行 。 可 以 将 前 面 生成 的 my.xml 文件 复制 到 源码 目录 ， 然 后 运 # 于 程序 ， 查 看 效果 。 


写 入 XML 文档 


与 QxmlSstreamReader 对 应 的 是 Qxmlstreamwriter ， 它 通过 一 个 简单 的 流 API 提 供 了 一 个 XML 写 
ee 
关 数 据 即 可 。 


将 前 面 主 函数 的 内 容 更 改 为 : 


nt main(znt arge, char “argv[ll) 
{ 
QCoreApplication a(argc, argv); 
QE Te fle( WAMmYXMmLSEreCamAmy 2 Xm 
If (!file.open(QFile: :writeOonly | QFile::Text)) 


qDebug() << "Error: cannot open file"; 
reGurm > 


QXmlStreamWriter stream(&file); 
stream.setAutoFormatting(true); 
stream.writeStartDocument( ); 
stream.writeStartElement("bookmark"); 
stream.writeAttribute("href", "http://qt.nokia.com/"); 
stream.writeTextElement("title", "Qt Home"); 
stream.writeEndElement(); 
stream.writeEndDocument( ); 

file.close(); 

qDebug() << "write finished!"; 

return a.exec(); 


这 里 使 用 了 setAutoFormatting(true) 函数 来 自动 设置 格式 ， 这 样 会 自动 换行 和 添加 缩 进 。 然 
后 使 用 了 writestartDocument() ， 该 函数 会 自动 添加 首 行 的 XML 说 明 

( 即 <?xmlversion="1.0" encoding="UTF-8"?> ) 2 添加 元 素 可 以 使 用 writeStartEJement() ， 
不 过 ， 这 里 要 注意 ， 一 定 要 在 元 素 的 属性 文本 等 添加 完成 后 ， 使 用 writeEndElement() 来 关 
闭 前 一 个 打开 的 元 素 。 在 最 后 使 用 writeEndpocument() 来 完成 文档 的 写 入 。 现 在 大 家 可 以 运 
行程 序 了 ， 这 时 会 在 项 目 目录 中 生成 一 个 XML 文档 。 


数据 库 和 XML 在 很 多 程序 中 都 经 常用 到 ， 它 们 的 使 用 也 总 是 和 数据 的 显示 联系 起 来 ， 所 以 学 
习 好 数据 库 的 知识 也 是 很 重要 的 ， 它 们 可 以 说 是 密 不 可 分 的 。 相 关内 容 ， 大 家 也 可 以 参考 
《Qt Creator 快 速 入 门 》 的 相关 章节 以 及 《Qt 及 Qt Quick 开 发 实战 精 解 》 的 数据 管理 系统 的 例 
子 ， 里 面 同时 应 用 了 数据 库 和 XML 。 


禾 秘 


ba 


第 31 篇 网 络 (一 ) Qt 网 络 编程 简介 


导语 


从 这 一 节 开 始 我 们 讲述 Qt 网 络 应 用 方面 的 编程 知识 。 在 开始 这 部 分 知识 的 学 习 之 前 ， 大 家 最 
好 已 经 拥有 了 一 定 的 网 络 知识 和 Qt 的 编程 基础 。 在 后 面 的 教程 中 我 们 不 会 对 一 个 常用 的 网 络 
名 词 进行 详细 的 解释 ， 对 于 不 太 了 解 的 地 方 ， 大 家 可 以 参考 相关 书籍。 


不 过 ， 大 家 也 没有 必要 非得 先 去 学 习 网 络 专业 知识 ， 而 后 再 学 习 本 部 分 内 容 ， 因 为 Qt 提供 了 
简单 明了 的 接口 函数 ， 使 得 这 里 并 不 需要 了 解 太 多 专业 的 知识 。 看 完 教程 后 ， 你 也 许 会 发 
现 ， 自 己 虽 然 不 懂 网 络 ， 但 却 可 以 编写 网 络 应 用 程序 了 。 


环境 : Windows Xp + Qt 4.8.5+Qt Creator 2.8.0 


目录 


。 一、 了 解 Qt 中 的 网 络 编程 
。 二 、 查 看 网 络 部 分 的 例子 


焉 又 
一 、 了 解 Qt 中 的 网 络 编程 


1 首先 我 们 打开 Qt Creator， 进 入 帮助 模式 ， 然 后 在 索引 中 查找 : Network Programming 关 
键 字 。 这 里 详细 介绍 了 Qt 中 网 络 编程 的 相关 内 容 。 如 下 图 所 示 。 


Network Programming 


者 Home Network Programming 


The QiNetwork module offers classes that allow you to write TCP/IP clients 
and servers. lt offers classes Such as QFtp that implement Specific 
application-level protocols, lower-level classes Such as QTcpSocket, 
QTcpServer and QUdpSocket that represent low level network concepts, 
and high level classes SuUch as QNetworkRequest, QNetworkReply and 
QNetworkAccessManager to perform network operations Using common 
protocols. lt also offers classes Such as QNetworkConfiguration, 
QNetworkConfigurationManager and QNetworkSession that implement 
bearer management. 


Qt 提供 了 QtNetwork 模块 来 进行 网 络 编程 。 该 模块 提供 了 诸如 QFtp 等 类 来 实现 特定 的 应 用 层 
协议 ; 有 较 低 层次 的 类 ， 例 如 QTcpsocket 、 QTcpserver 和 Qudpsocket 等 来 表示 低层 的 网 络 
概念 ， 还 有 高 层次 的 类 ， 例 如 QNetworkRequest 、 QNetworkReply 和 QNetworkAccessManager 使 


用 相同 的 协议 来 执行 网 络 操作 ; 也 提供 


了 QNetworkConfiguration 、 QNetworkConfigurationManager 和 QNetworkSession 等 类 来 实现 负 


载 管理 。 


2 在 文档 的 后 面 提供 了 Qt 中 用 于 网 络 编程 的 类 的 列表 。 如 下 图 所 示 。 


Qt's Classes for Network Programming 


The following classes provide support for network programming in Qt 


QAbstractSocket The base functionality common to all 


sockettypes 
QAuthenticator Authentication object 
Implementation of the client side of 
QFip FTP protocol 
QHostAddress IP address 
Static functions for host name 
QHostinfo lookups 
t Resembles a MIME multipart 
QHitpMultiP art message to be sent over HTTP 
Holds a body part to be used inside 
QHttpPart aHTIP multipart MIME message 
Allows the application to send 
QNetworkAccessManager network freguests and receive 


replies 


3 . 如 果 大 家 以 前 就 使 用 过 Qt 进行 网 络 部 分 编程 ， 或 者 看 过 其 他 教材 上 相关 内 容 ， 你 可 
问 ， 这 里 怎么 没有 了 QHttp 类 。 我 们 现在 搜索 QHttp 关键 字 ， 其 内 容 如 下 。 
QHttp Class Reference 


人 熏 Home Modules QtNetwork ”QHttp 


The QHttp class provide 
protocol More.. 


#include <QHttp> 


This class is obsolete. It is provided to keep old source code working. 
We strongly advise against Using it in new code. 


可 以 看 到 这 里 有 一 个 警告 : 


la 
已 


会 


This class is obsolete. lt is provided to keep old source code working. We strongly advise 
against using it in new code. 


大 概 意思 是 : 这 个 类 是 过 时 的 。 它 的 提供 只 是 为 了 保证 昌 的 源 代码 。 我 们 强烈 建议 在 新 代码 
中 不 要 使 用 它 。 


所 以 在 我 们 的 教程 中 不 会 再 讲解 这 个 类 ， 对 于 HTTP 部 分 的 编程 ， 我 们 使 


用 QNetworkAccessManager 类 和 QNetworkReply 类 
二 、 查 看 网 络 部 分 的 例子 


对 于 网 络 编程 部 分 的 例子 ， 可 以 通过 Qt 自 带 的 演示 程序 查看 。 就 是 开始 菜单 中 Qt 安装 目录 下 
Example and demos 程 序 ， 网 络 编程 例子 在 Networking 分 类 中 。 如 下 图 所 示 。 


和 


| WWQt Exanples and Deaos 上 eled 


Damonstrations Qt Examples and Demos 


Animation Framework 

Qt is supplied with a number of example applications and demonstrations 
that have been written to provide developers with examples of the Qt API 
in use, highlight good programming practice, and showcase features found 


Concurrent Programming 


Qt Declarative Examples 


Ot Designer in each of Qt's core technologies. 


Deskto 
The example and demo launcher can 


Dialogs 

Drag and Drop 
Graphics View 
IPC 

Item Views 
Layouts 

Qt Linguist 
Main Windows 
QML UI Components 
Networking 
OpenGL 
Painting 


进入 Networking 分 类 


be used to explore the different 
categories available. It provides an 
overview of each example, lets you 
view the documentation in Qt 
Assistant, and is able to launch 
examples and demos, 


Documentation for examples can be 
found in the Tutorials and Examples 
section of the Qt documentation., 


， 如 下 图 所 示 。 


Toggle fullscreen 





区 Qt Exanples and Deaos | 外 ]| | 


~ Blocking Fortune Client Netwo rki nn g 


Broadcast Receiver 


Qt is provided with an extensive set of network classes to support both 
client-based and server side network programming. 


Broadcast Sender 
Network Chat Client 


Fortune Client These examples demonstrate the 
fundamental aspects of network 


Fortune Server 
programming with Qt. 


FTP Client 


HTTP Clisnt The example launcher provided with 
Qt can be Used to explore each of 


i the examples in this directory. 


Threaded Fort. Server 
Torrent Client 
Secure Socket Client 


Google Suggest 





最 后 要 说 明 的 是 : 如 果 要 使 用 QtNetwork 模 块 中 的 类 ， 需 要 在 项 目 文件 中 添加 QT+= network 
一 行 代码 。 








面 的 教程 中 我 们 将 对 Qt 网 络 编程 部 分 的 知识 点 分 别 进行 讲解 ， 对 Qt 中 网 络 编程 内 容 有 了 初 
了 


后 
步 了 解 以 后 ， 我 们 就 开始 下 一 步 的 学 习 吧 。 


网 络 (二 ) HTTP 


导语 


HTTP (HyperText Transfer Protocol， 超 文本 传输 协议 ) 是 一 个 客户 端 和 服务 器 端 请 求 和 应 
答 的 标准 。 在 Qt 的 网 络 模 块 中 提供 了 网 络 访问 接口 来 实现 HTTP 编 程 。 . We 问 接口 AR 
般 的 网 络 操作 的 类 的 集合 ， 该 接口 在 特定 的 操作 和 使 用 的 协议 (例如 ， 通 过 HTTP 进 行 获取 和 
发 送 数据 ) 上 提供 了 一 个 抽象 层 ， 只 为 外 部 暴露 出 了 类 、 郊 数 和 信号 。 


上 一 节 中 我 们 已 经 提 到 过 了 ， 现 在 Qt 中 使 用 QNetworkAccessManager 类 和 QNetworkReply 类 来 
进行 HTTP 的 编程 。 网 络 请 求 由 QNetworkRequest 类 来 表示 ， 它 也 作为 与 请 求 有 关 的 信息 ( 例 
如 ， 任 何 头 信息 和 使 用 加 密 ) 的 容器 。 在 创建 请 求 对 象 时 指定 的 URL 决 定 了 请 求 使 用 的 协 
议 ， 目 前 支持 HTTP、 ee 。 QNetworkAccessManager 类 用 来 协 
调 网 络 操作 ， 每 当 一 个 请 求 创建 后 ， 该 类 用 来 调度 它 ， 并 发 射 信号 来 报告 进度 。 该 类 还 协 
调 cookies 的 使 用 ， 身 份 验证 请 求 ， ee 。 对 于 网 络 请 求 拘 应 答 合 

用 QNetworkReply 类 表示 ， 它 会 在 请 求 被 完成 调度 时 由 QNetworkAccessManager 

建 。 QNetworkReply 提供 的 信号 可 以 用 来 单独 的 监 视 每 一 个 应 答 。 


下 面 我 们 先 讲解 一 个 简单 下 载 网 页 的 例子 ， 然 后 将 其 扩展 为 可 以 下 载 任何 文件 。 


环境 : Windows Xp + Qt 4.8.5+Qt Creator 2.8.0 


目录 


e。 一 、 简 单 的 网 页 浏览 功能 
e 二、 实现 下载 文件 功能 


下 又 
一 、 简 单 的 网 页 浏览 功能 


1 新 建 Qt Gui 应 用 ， 项 目 名 称 为 http ， 基 类 使 用 默认 的 QMainwindow 即 可 ， 类 名 


为 Mainwindow ° 


2 完成 后 打开 http.pro 文件 ， 然 后 添加 下 面 一 行 代码 来 使 用 网 络 模块 : 


QT += network 


然后 保存 该 文件 。 


3 ， 下 面 打开 mainwindow.ui 文件 进入 设计 模式 ? 向 界面 上 添加 一 个 Text Browser 部 件 ® 效果 
如 下 图 所 示 。 


在 这 里 输入 

时 加 
盈 
[ [a [ 


4 打开 mainwindow.h 文件 ， 先 包 含 头 文件 : #include <QtNetwork> 
然后 添加 一 个 private 私有 对 象 定义 : QNetworkAccessManager *manager 


最 后 添加 一 个 私有 楼 声 明 : 


private slots: 
void replyFinished(QNetworkReply *); 


5. 下 面 到 mainwindow.cpp 文件 中 ， 先 在 构造 函数 中 添加 如 下 代码 : 


manager = new QNetworkAccessManager (this); 

connect(manager, SIGNAL(finished(QNetworkReply*)), 
this,SLOT(replyFinished(QNetworkReply*))); 
manager->get(QNetworkRequest(QUr1l("http://www.qter.org"))); 


这 里 先 创建 了 一 个 QNetworkAccessManager 类 的 实例 ， 它 用 来 发 送 网 络 请 求 和 接收 应 答 。 然 后 
关联 了 管理 器 的 finished() 信号 和 我 们 自 定义 的 模 ， 每 当 网 络 应 答 结 束 时 都 会 发 射 这 个 信 

号 。 最 后 使 用 了 get() 函数 来 发 送 一 个 网 络 请 求 四 网 络 请 求 使 用 QNetworkRequest 类 表 

示 ， get() 函数 返回 一 个 QNetworkReply 对 象 。 除 了 get() 函数 ， 管 理 器 还 提供 了 发 送 HTTP 
POST 请 求 的 post() 函数 。 


6 .下 面 添加 槽 的 定义 : 


void Mainwindow: :replyFinished(QNetworkReply *reply) 


{ 
QTextCodec *codec = QTextCodec: :codecForName("utf8"); 
QString all = codec->toUnicode(reply->readAll()); 
ui->textBrowser->setText(all); 
reply->deleteLater(); 

} 


因为 QNetworkReply 继承 自 QIopevice 类 ， 所 以 可 以 操作 一 般 的 |/O 设 备 一 样 来 操作 该 类 。 这 
里 使 用 了 readAl1() 函数 来 读 取 所 有 的 应 答 数 据 ， 为 了 正常 显示 中 文 ， 使 用 了 QTextcodec 类 
来 转换 编码 。 在 完成 数据 的 读 取 后 ， 需 要 使 用 deleteLater() 来 删除 replay 对 象 。 


7 因为 这 里 使 用 了 Qtextcodec 类 ， 所 以 还 需要 在 mainwindow.cpp 文件 中 包含 头 文件 


#include <QTextCodec> 


下 面 运行 程序 ， 效 果 如 下 图 所 示 。 


由 EB phTl 回回 因 





Qter 开 源 社 区 全 新 改版 ,即将 开放 
襄 请 期 待 ， 














这 里 再 将 整个 过 程 简 答 叙 述 一 遍 : 上 面 实现 了 最 简单 的 应 用 HTTP 协 议 下 载 网 页 的 功 
能 。 QNetworkAccessManager 类 用 于 发 送 网 络 请求 和 接受 回复 ， 具 体 来 说 ， 它 是 
用 QNetworkRequest 类 来 管理 请 求 ， QNetworkReply 类 进行 接收 回复 ， 并 对 数据 进行 处 理 。 


在 上 面 的 代码 中 ， 我 们 使 用 了 下 面 的 代码 来 发 送 请 求 : 


manager->get(QNetworkRequest(QUr1l("http://www.qter.org"))); 


它 返 回 一 个 QNetworkReply 对 象 ， 这 个 后 面 再 讲 。 我 们 只 需 知 道 只 要 发 送 请 求 成 功 ， 


它 就 会 下 
载 数据 。 而 当 数 据 下 载 完成 后 ， manager 会 发 出 finished() 信号 ， 我 们 关联 了 该 信号 : 


connect(manager, SIGNAL(finished(QNetworkReply*)), 
this,SLOT(replyFinished(QNetworkReply*))); 


也 就 是 说 ， 当 下 载 数据 结束 时 ， 就 会 执行 replyFinished() 函数 。 在 这 个 函数 中 我 们 对 接收 的 
数据 进行 处 理 : 
QTextCodec *codec = QTextCodec: :codecForName("utf8"); 


QString all = codec->toUnicode(reply->readAll()); 
ui->textBrowser->setText(all); 


这 里 ， 为 了 能 显示 下 载 的 网 页 中 的 中 文 ， 我 们 使 用 了 QTextcodec 类 对 象 ， 应 用 utf8 编 码 。 使 
用 reply->readAll() 函数 就 可 以 将 下 载 的 所 有 数据 读 出 。 然 后 ， 我 们 在 textBrowser 中 将 数据 
显示 出 来 。 当 reply 对 象 已 经 完成 了 它 的 功能 时 ， 我 们 需要 将 它 释 放 ， 就 是 最 后 一 条 代码 : 


reply->deleteLater(); 


二 、 实 现下 载 文件 功能 
ae et oem ange sly 
不 过 ， 一 般 我 们 下 载 文件 都 想 要 看 到 下 载 进 度 。 下 面 我 们 就 更 改 上 面 的 程序 ， 让 它 可 以 下 载 
任意 的 文件 ， 并 且 显 示 下 载 进度 

1 进入 设计 模式 ， 删 除 以 前 的 Text Browser 部 件 ， 然 后 拖 入 一 个 Line Edit ， 一 个 Label ， 
= 个 Progress Bar 和 一 个 Push Button ， 设 计 界 面 如 下 图 所 示 。 


”在 这 里 输入 


请 输入 URI 地 址 : 


| ET 





| TR 


2 . 在 写 代码 之 前 ， 我 们 先 介绍 一 下 整个 程序 执行 的 流程 : 开始 我 们 先 让 进度 条 隐藏 。 当 我 们 
在 Line Edit 中 输入 下 载 地 址 ， 2 ， 我 们 应 用 输入 的 下 载 地 址 ， 获 得 文件 名 ， 在 磁 
盘 上 新 建 一 个 文件 ， 用 于 保存 下 载 的 数据 ， 然 后 进行 链接 ， 并 显示 进度 条 。 enn ? 
我 们 将 每 次 获得 的 数据 都 写 入 文件 中 ， 并 更 新 进度 条 ， 在 接收 完 文 件 后 ， 我 们 重新 隐藏 进 

条 ， 并 做 一 些 清理 工作 。 根 据 这 个 思路 ， 我 们 开始 代码 的 编写 


3 到 mainwindow.h 中 ， 首 先 添 加 public 函数 声明 : 


void startRequest(QUrl url); // 请 求 链接 


后 添加 几 个 private 变 量 和 对 象 定义 : 


QNetworkReply *reply; 
QUrlL url; // 存 址 
QFile *file; // 文 件 指针 






后 到 private slots 中 ， 删 除 前 面 的 replyFinished(QNetworkReply *) 槽 声 明 ， 并 添加 如 下 
代码 : 


private Slots : 
void on_pushButton_clic ked( ) ; 
void httpFinished(); // 完 成 下 载 后 的 处 
void httpReadyRead( )， // 接 收 J 处 理 
void updateDataReadProgress(qint64，qint64)， // 更 新 进度 条 









4 下 面 到 mainwindow.cpp 文件 中 ， 将 前 面 在 构造 函数 中 添加 的 内 容 删 除 后 添加 如 下 代 
码 : 


manager = new QNetworkAccessManager (this); 
ui->progressBar->hide(); 


我 们 在 构造 函数 中 先 隐 藏 进度 条 。 等 开始 下 载 时 再 显示 它 。 


5. 下 面 将 前 面 程序 中 添加 的 replyFinished() 元 数 的 定义 删除 ， 然 后 添加 新 的 函数 的 定义 。 
先 添加 网 络 请 求 函 数 的 实现 : 


void Mainwindow: :startRequest(QUrlL url) 


{ 
reply = manager->get(QNetworkRequest (ur1)); 
connect(reply, SIGNAL(readyRead()), this, SLOT(httpReadyRead( ))); 
connect(reply, SIGNAL(downloadProgress(qint64, qint64)), 
this, SLOT(updateDataReadProgress(qint64, qint64))); 
connect(reply, SIGNAL(finished()), this, SLOT(httpFinished())); 
} 


这 里 使 用 了 get() 函数 来 发 送 网 络 请 求 ， 然 后 进行 了 QNetworkReply 对 象 的 几 个 信号 和 自 定义 
模 的 关联 。 其 中 readyRead () 信号 继承 自 QIODevice 类 ， 每 当 有 新 的 数据 可 以 读 取 时 ， 都 会 发 
射 该 信号 ; 每 当 网 络 请 求 的 下 载 进度 更 新 时 都 会 发 射 downloadProgress() 信号 ， 它 用 来 更 新 
进度 条 ; 每 当 应 答 处 理 结束 时 ， 都 会 发 射 finished() 信号 ， 该 信号 与 前 面 程序 

中 QNetworkAccessManager 类 的 finished() 信号 作用 相同 ， 只 不 过 是 发 送 者 不 同 ， 参 数 也 不 同 
而 已 。 下 面 添加 几 个 槽 的 定义 。 


void Mainwindow: :httpReadyRead () 


If (file) file->write(reply->readA1ll( )); 


这 里 先 判断 是 否 创 建 了 文件 ， 如 果 是 ， 则 读 取 返 回 的 所 有 数据 ， 然 后 写 入 到 文件 。 该 文件 是 
在 后 面 的 “下 载 "按钮 单 击 信 号 模 中 创建 并 打开 的 。 


void Mainwindow: :updateDataReadProgress(qint64 bytesRead, qint64 totalBytes) 
{ 
ui->progressBar->setMaximum(totalBytes); 
ui->progressBar->setValue(bytesRead); 


这 里 设置 了 一 下 进度 条 的 最 大 值 和 当前 值 。 


void MainwWindow: :httpFinished() 
{ 
ui->progressBar->hide( ); 
file->flush(); 
file->close(); 
reply->deleteLater(); 
reply = 0; 
delete file; 
le 0 


当 完 成 下 载 后 ， 重 新 隐藏 进度 条 ， 然 后 删除 reply 和 file 对 和 象 。 下 面 是 "下载 "按钮 的 单 击 信 
号 的 槽 : 


void Mainwindow: :on_pushButton_clicked() 
{ 
url = ui->lineEdit->text(); 
QFileInfo info(url.path()); 
QString fileName(info.fileName()); 
if (fileName.isEmpty()) fileName = "index.html"; 
file = new QFile(fileName); 
if(!file->open(QIODevice: :WriteOnly)) 
{ 
qDebug() << "file open error"; 
delete file; 
file = 0; 
return,; 


startRequest (url); 


ui->progressBar->setValue(0); 
ui->progressBar->show( ); 


这 里 使 用 要 下 载 的 文件 名 创建 了 本 地 文件 ， 然 后 使 用 输入 的 url 进行 了 网 络 请 求 ， 并 显示 进 
6 :下面 运行 程序 ， 我 们 先 输入 www.yafeilinux.com 的 网 址 ， 下 面 一 个 网 页 。 效 果 如 下 图 所 


0° 
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ID 


| 下 二 im 下 Tido 训 


辐 可 加 


请 输入 WRI 地 址 : 











完成 后 ， 可 以 尝试 输入 一 个 文件 的 下 载 地 址 ， 比 如 这 里 输入 了 《Qt Creator 快 速 入 门 》 一 书 在 
百度 网 和 瘟 上 的 地 址 ， 效 果 如 下 图 所 示 。 


有 Eph plih 加 回回 


请 输入 WRI 地 址 : 





(http: /111. 11.27. 45/ cdn. bai dupes. com/ File/3a4802548a526f| 











7 最 后 ， 可 以 去 项 目 编译 生成 的 文件 目录 中 查看 下 载 的 文件 (我 这 里 
是 E:\http-build- 束 面 -Debug ) ， 可 以 看 到 下 载 的 文件 ， 如 下 图 所 示 


IN 


第 32 篇 网 络 (二 ) HTTP 


篇 http-build- 泉 面 ~-Debug 
文件 严 ) 编辑 人 于) 查看 收藏 的 工具 CI) 帮助 0 


全 碍 - 日 - 访 甩 寻 及 Hx 国 : 


回 了 :http-build- 点 面 -Debug 


文件 和 立 件 夹 芷 务 y 回 debug release Sk 压缩 立 
Nakefile Makefile. Debug 
六 件 la38| | DEBvG 次 件 
6 B 了 玛 

一 Makefile. Release ul_mainwindow. h 
RELEASE 文件 C++ Header file 
BEE 4 三 











选 定 2 个 对 象 6.97 服 时 我 的 电脑 





结语 


HTTP 应 用 的 内 容 就 讲 到 这 里 ， 可 以 看 到 它 是 很 容易 的 ， 也 不 需要 大 家 了 解 太 多 的 HTTP 的 原 
理 知识 。 关 于 相关 的 类 的 其 他 使 用 ， 也 可 以 查看 其 帮助 文档 。 在 上 面 的 例子 中 ， 我 们 只 是 为 
了 讲解 知识 ， 所 以 程序 不 是 很 完善 ， 对 于 一 个 真正 的 工程 ， 还 是 需要 注意 更 多 其 他 细节 的 ， 
大 家 可 以 查看 一 下 Qt 演示 程序 HTTP Client 的 源 代 码 。 


涉及 到 的 源码 
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第 33 篇 网 络 (三 ) FTP (一 ) 


导语 


上 一 节 我 们 讲述 了 HTTP 的 编程 ， 这 一 节 讲 述 与 其 及 其 相似 的 FTP 的 编程 。FTP 即 FileTransfer 
Protocol， 也 就 是 文件 传输 协议 。FTP 的 主要 作用 ， 就 是 让 用 户 连 接 上 一 个 远程 计算 机 ， 查 看 
远程 计算 机 有 哪些 文件 ， 然 后 把 文件 从 远程 计算 机 上 拷贝 到 本 地 计算 机 ， 或 者 把 本 地 计算 机 
的 文件 送 到 远程 计算 机 上 。 


环境 : Windows Xp + Qt 4.8.5+QtCreator 2.8.0 


介 
。 二 、 实 现 简 单 的 文件 下 载 


一 、 简 介 


在 Qt 中 ， 我 们 可 以 使 用 上 一 节 讲 述 的 QNetworkAccessManager 和 QNetworkReply 类 来 进行 FTP 
程序 的 编写 ， 因 为 它们 用 起 来 很 简单 。 但 是 ， 对 于 较 复 杂 的 FTP 操 作 ，Qt 还 提供 了 QFtp 类 ， 
利用 这 个 类 ， 我 们 很 容易 写 出 一 个 FTP 客 户 端 程序 。 下 面 我 们 先 在 帮助 中 查看 这 个 类 。 


QFtp Class Reference 


个 Home Modules QtNetwork QFtp 


The QFtp class provides an implerr 


#include <QFtp> 
1herits: QObject. 


=" Listofallmembers, including inherited members 


a Qt3supportmembers 


2Ublic Types 


在 QFtp 中 ， 所 有 的 操作 都 对 应 一 个 特定 的 函数 ， 我 们 可 以 称 它 们 为 命令 。 

如 connectToHost() 连接 到 服务 器 命令 ， login() 登录 命令 ， get() 下 载 命 令 ， mkdir() 新 建 
目录 命令 等 。 因 为 QFtp 类 以 异步 方式 工作 ， 所 以 所 有 的 这 些 函 数 都 不 是 阻塞 函数 。 也 就 是 
说 ， 如 果 一 个 操作 不 能 立即 执行 ， 那 么 这 个 函数 就 会 直接 返回 ， 直 到 程序 控制 权 返 回 Qt 事件 
循环 后 才 申 正 执行 ， 它 们 不 会 影响 界面 的 显示 。 


所 有 的 命令 都 返回 一 个 int 型 的 编号 ， 使 用 这 个 编号 让 我 们 可 以 跟踪 这 个 命令 ， 查 看 其 执行 
状态 。 当 每 条 命令 开始 执行 时 ， 都 会 发 出 commandstarted() 信号 ， 当 该 命令 执行 结束 时 ， 会 
发 出 commandFinished() 信号 。 我 们 可 以 利用 这 两 个 信号 和 命令 的 编号 来 获取 命令 的 执行 状 
态 。 当 然 ， 如 果 不 想 执行 每 条 命令 都 要 记 下 它 的 编号 ， 也 可 以 使 用 currentcommand() 来 获取 
现在 执行 的 命令 ， 其 返回 值 与 命令 的 对 应 关系 如 下 图 。 

enum QFtp::Command 


This enum is used as the return value for the currentCommande) function. Thi 
jirectory view when a listt) command is started in this case you can simply chec 


Constant Value Description 

QFtp: :None 0 No command is being executed. 
QFtp: :SetTransferMode a setthe transfer mode. 

QFtp: :SetProxy 2 Switch proyying on or oft. 

QFtp: :ConmectToHost 3 connectToHostd is being executed. 
QFtp: :Loygin 4 logind is being executed. 

QFtp: :Close 5 closen is being executed. 

QFtp: :List 6 listd is being executed. 

QFtp: :Cd 3 cdn is being executed. 

QFtp: :Get 8 yetd is being executed. 

QFtp: :Put 9 putd is being executed. 

QFtp: :Remowe 10 removen is being executed. 

QFtp: :Mdir 1 mkdird is being executed. 

QFtp: :Rmdir 12 rmdird is being executed. 

QFtp: :Rename 3 renamen is being executed. 
QFtp: :RawCommand 14 rawCommandd is being executed. 


二 、 实 现 简单 的 文件 下 载 


下 面 我 们 先 看 一 个 简单 的 FTP 客 户 端的 例子 ， 然 后 对 它 进行 扩展 。 在 这 个 例子 中 我 们 从 FTP 服 
务 器 上 下 载 一 个 文件 并 显示 出 来 。 


1 我 们 新 建 Qt Gui 应 用 。 项 目 名 次 为 myFtp ， 基 类 选择 aowidget ， 类 名 保持 widget 即 可 。 
完成 后 打开 muFtp.pro 文件 ， 在 上 面 添加 一 行 : QT += network ， 然 后 保存 该 文件 。 


2 修改 widget.ui 文件 。 在 其 中 添加 一 个 TextBrowser 和 一 个 Label ， 效 果 如 下 。 





LJ 
或 extLabel 图 
LJ LJ LJ 


3 .在 main,cpp 中 进行 修改 。 
为 了 在 程序 中 可 以 使 用 中 文 ， 我 们 在 main.cpp 中 添加 头 文 件 #include <QTextcodec> 
并 在 main() 函数 中 添加 代码 : 


QTextCodec::setCcodecForTr(QTextCodec: :codecForLocale()); 


4 在 widget.h 中 进行 修改 。 
先 添 加 头 文件 : #include <QFtp> 
再 在 private 中 定义 对 象 : QFtp *ftp; 


添加 私有 槽 函数 : 


private Slots : 


void ftpCommandStarted(int); 
void ftpCommandFinished(int,bool); 


5 .在 widget.cpp 中 进行 更 改 。 


(1) 在 构造 函数 中 添加 代码 : 


ftp = new QFtp(this); 






ftp->connectToHost("ftp.qt-project.org"); // 连 接 到 服务 器 
ftp->login();  // 登 录 

ftp->cd("qt/source"); // 跳 转 到 “gqt” 目录 下 的 Source 目 录 中 
ftp->get("INSTALL"); //T ZITNSTALLY 文 件 


ftp->close();  // 关 闭 连 接 

// 当 每 条 命令 开始 执行 时 

i 
this,SLOT(ftpCommandStarted(int))); 


相应 的 人 


发 出 


// 当 每 条 命令 执行 结束 时 发 出 相应 的 信号 
connect(ftp,SIGNAL(commandFinished(int,bool)), 
this,SLOT(ftpCommandFinished(int,bool))); 


吉 来 时 


我 们 在 构造 函数 里 执行 了 几 个 FTP 的 操作 ， 登 录 站 点 ， 并 下 载 了 一 个 文件 。 然 后 又 关联 了 两 个 
信号 和 楷 ， 用 来 跟踪 命令 的 执行 情况 。 


(2) 实现 槽 函数 : 


void Widget::ftpCommandStarted(int) 


if(ftp->currentCommand() == QFtp::ConnectToHost){ 
ui->label->setText(tr(" 正 在 连接 到 服务 器 ,..")); 


If (ftp->currentCommand() == QFtp::Login){ 
ui->label->setText(tr(" 正 在 登录 ...")); 
If (ftp->currentCommand() == QFtp::Get)t{ 


ui->label->setText(tr(" 正 在 下 载 .， 


else if (ftp->currentCommand() = 
ui->label- >setText(tr(" 正 在 关闭 连 
} 


每 当 命令 执行 时 ， 都 会 执行 ftpcommandstarted() 函 
调用 命令 时 返回 的 id ， 如 int loginID= ftp->login(); 这 
Se 来 判断 执行 的 是 否 是 Jogin() 此 


用 if(id = 
一 个 变量 来 存储 其 返回 值 ， 所 以 ， 我 们 这 
执行 的 命令 的 类 型 。 在 这 


…)) 7 


ee :Close){ 
")); 


这 时 ， 我 们 就 可 以 
函数 。 但 是 ， 


函数 ， 它 有 一 个 参数 int id ， 这 个 i 


我 们 不 想 为 每 人 
文 里 使 用 了 ftp->currentCommand() ， 它 
个 函数 里 我 们 让 开始 不 同 的 命令 时 显示 不 同 的 状态 信息 


名 


void Widget::ftpCommandFinished(int,bool error) 


If(ftp->currentCommand() == QFtp::ConnectToHost){ 


if(error) 


se "连接 服务 器 出 现 错误 : %1") 
arg(ftp- >errorString())); 
else ui->label- >setText(tr(" 连 接 到 服务 器 成 功 ") ) 


If (ftp->currentCommand() == QFtp::Login){ 
If(error ) 
ui->label->setText(tr(" 登 录 出 现 错误 : %1") 


.arg(ftp->errorstring())); 


else ui->label->setText(tr(" 登 录 成 功 ")); 


If (ftp->currentCommand() == QFtp::Get)t{ 
if(error) 
ui->label->setText(tr(" 下 载 出 现 错误 : %1") 


.arg(ftp->errorstring())); 


else 1{ 
ui->label->setText(tr(" 已 经 完成 下 载 ")); 
ui->textBrowser->setText(ftp->readAll( )); 
} 


} 
else if (ftp->currentCommand() = pe: :Close){ 
ui->label- >setText (tr(" 已 经 关闭 连 车 接 " ) )， 


这 个 函数 与 ftpcommandstarted() 函数 相似 ， 但 是 ， 它 是 在 一 个 命令 执行 结束 时 执行 的 。 它 有 
两 个 参数 ， 第 一 个 intid 3? 就 是 调用 命 令 时 返回 的 编号 . 我 们 在 上 面 已 经 讲 过 了 。 。 第 二 个 | 
是 bool error ， 它 标志 现在 执行 的 命令 是 否 出 现 了 错误 。 如 果 出 现 了 错误 ， 那 么 error 


为 true ， 否 则 为 false 。 我 们 可 以 利用 它 来 输出 错误 信息 。 


条 命令 时 显示 不 同 的 状态 信息 ， 并 显示 可 能 的 出 错 信息 。 


。 在 这 


文 个 部 数 中 ， 我 们 在 完成 一 


在 if (ftp->currentCommand() == QFtp::Get) 中 ， 也 就 是 已 经 完成 下 载 时 ， 我 们 


让 textBrowser 显示 下 载 的 信息 。 
6 . 运行 程序 ， 效 果 如 下 。 


有 ¥idget 





INSTALLING QtAX11 Version 
|4.1.3: 


1， It you have the commercial edition of Qt, install 
| your license 
file as $HOME/. qt-license 


For the open source version you do not need a 
|license file 





2. Unpack the archive if you have not done so 
| already: 








已 经 关闭 连接 





7 出 错 演 :里 不 5 
下 面 我 们 演示 一 下 出 错时 的 情况 。 
将 构造 函数 中 的 代码 ftp->login(); 改 为 ftp->login("tom", "123456"); 


这 时 我 们 再 运行 程序 : 


辐 可 加 














登录 出 现 错误 : Login failed: 


Login incorrect. 





可 以 看 到 ， 它 输出 了 错误 信息 ， 指 明了 错误 的 指令 和 出 错 的 内 容 。 其 实 我 们 设置 的 这 个 错 
les 在 FTP 中 如 果 没 有 设置 用 户 名 和 密码 ， 那 么 默认 的 用 户 名 应 该 
是 anonymous ， 这 时 密码 可 以 任意 填写 ， 而 使 用 其 他 用 户 名 是 会 出 错 的 。 


在 下 一 节 中 ， 我 们 将 会 对 这 个 程序 进行 扩展 ， 让 它 可 以 浏览 服务 器 上 的 所 有 文件 ， 并 进行 下 
载 。 


涉及 的 源码 下 载 
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导语 


前 面 讲述 了 一 个 最 简单 的 FTP 客 户 端 程序 的 编写 ， 这 一 节 我 们 将 这 个 


浏览 并 能 下 载 服务 器 上 的 所 有 文件 。 
环境 : Windows Xp + Qt 4.8.5+QtCreator 2.8.0 


e 一 、 修 改 界 面 
。 二 、 功 能 实现 


正文 
一 、 修 改 界 面 


我 们 删除 了 TextBrowser ， 加 入 了 几 个 Label ， Line Edit ， 


程序 进行 扩展 ， 使 其 可 以 


Push Button 部 件 ， 一 


个 Tree Widge t 及 一 个 progress Bar 部 件 。 然 后 我 们 对 其 中 几 个 部 件 做 如 下 更 改 。 


(1) 将 “FTP 服 务 器 "标签 后 的 Line Edit 的 objectName 属性 改 为 ftpServerLineEdit ， 


其 text 属性 改 为 ftp.qt-project.org 。 


(2 ) 将 “用 户 名 ”标签 后 的 Line Edit 的 objectName 属性 改 为 userNameLineEdit ， text 属 
性 改 为 anonymous ， 将 其 toolTip 属性 改 为 "默认 用 户 名 请 使 用 : anonymous ， 庆 时 二 总 术 


心 


(3) 将 “密码 "标签 后 的 Line Edit 的 objectName 属性 改 为 passWordLineEdit ， 其 text 属性 


改 为 123456 ， 将 其 echoMode 属性 改 为 Password 。 


(4) 将 “连接 "按钮 的 objectName 属性 改 为 connectButton 。 


(5) 将 “返回 上 一 级 目 录 ” 按 钮 的 objectName 属 ， 隆 改 为 cdToParentButton 。 


(6 ) 将 "下载" 按钮 的 objectName 属性 改 为 downloadButton ° 


(7) 将 Tree Widget 的 objectName 属性 改 为 fileList ， 然 后 在 Tree widget 部 件 上 单 击 鼠 


标 右 键 ， 选 择 Edit Items 菜单 ， 添 加 列 属 性 如 下 。 
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网 编辑 树 窗口 部 件 
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最 终 界 面 如 图 所 示 : 
天 LD 
FTF 服 备 器 : (Etp. qt-project. org | 
用 户 名 : |anonymous | 密码 : eooeee | 连接 
立 件 太 小 拥有 者 所 尾 组 收 改 日 期 
国 各 
< 匿 : 
we [GE 
FT? 客户 端 





下 面 我 们 的 程序 中 ， 就 是 实现 在 用 户 填写 完 相 关 信 息 后 ， 按 下 “连接 "按钮 ， 就 可 以 连接 到 FTP 
服务 器 ， 并 在 Treewidget 中 显示 服务 器 上 的 所 有 文件 ， 我 们 可 以 按 下 "下载 "按钮 来 下 载 选 中 
的 文件 ， 并 使 用 进度 条 显示 下 载 进 度 。 


二 、 功 能 实现 
1 :更改 widget.h 文件 。 
(1) 添加 头 文件 #include <QtGui> 


(2) 在 private 中 添加 变量 : 


281 


QHash<QString，bool> isDirectory; // 用 来 存储 一 个 路 径 是 否 为 目录 的 信息 


QString currentPath; // 用 来 存储 现在 的 路 径 
QFile *file; 





(3) 添加 模 : 


private Slots : 

void on_downloadButton_ clicked(); 

void on_cdToParentButton clicked(); 

vord oniconnectButtoniclreKed(, 

void ftpCommandFinished(int,bool); 

void ftpCommandStarted(int); 

void updateDataTransferProgress(qint64,9qint64 );// 更 新 进度 条 
// 将 服务 器 上 的 文件 添加 到 Tree Widget 中 

vond addToBrse(const QUrLinto Curlinto)y 

void processItem(QTreewidgetItem*,int);// 双 击 一 个 目录 时 显示 其 内 容 


2 更改 widget.cpp 的 内 容 。 


(1) 实现 “连接 "按钮 的 单 击 事件 楷 。 





void Widget::on_connectButton_clicked() 
{ 
ui->fileList->clear(); 
currentPath.clear(); 
isDirectory.clear(); 


ftp = new QFtp(this); 
connect(ftp,SIGNAL(commandStarted(int)), 
this,SLOT(ftpCommandStarted(int))); 
connect(ftp,SIGNAL(commandFinished(int,bool)), 
this,SLOT(ftpCommandFinished(int,bool))); 
connect(ftp,SIGNAL(listIinfo(QUrlInfo)), 
this,SLOT(addToList (QUrlInfo))); 
connect(ftp,SIGNAL(dataTransferProgress(qint64,qint64)), 
this,SLOT(updateDataTransferProgress(qint64,qint64))); 


QString ftpServer = ui->ftpServerLineEdit->text(); 

QString userName = ui->userNameLineEdit->text(); 

QString password = ui->passWordLineEdit- 人 
ftp->connectToHost(ftpServer,21); // 连 接 到 服务 器 ,默认 端口 号 是 21 
ftp->login(userName, passWwWord); We 






我 们 在 “连接 "按钮 的 单 击 事件 模 函 数 中 新 建 了 ftp 对 象 ， 然 后 关联 了 相关 的 信号 和 模 。 这 里 
的 listInfo() 信号 由 ftp->list() 函数 发 射 ， 它 将 在 登录 命令 完成 时 调用 ， 下 面 我 们 提 到 。 
而 dataTransferpProgress() 信号 在 数据 传输 时 自动 发 射 。 最 后 我 们 从 界面 上 获得 服务 器 地 址 ， 
用 户 名 和 密码 等 信息 ， 并 以 它们 为 参数 执行 连接 和 登录 命令 。 


(2) 更 改 ftpcommandFinished() 函数 。 
我 们 在 相应 位 置 做 更 改 。 


首先 ， 在 登录 命令 完成 时 ， 我 们 调用 list() 函 数 : 


ui->label- I 性 录 成 功 ") ) ; 

ftp->list();  // 发 射 1istInfo( ) 人 信号， 显示 文件 列表 

然后 ， 在 下 载 命令 完成 时 ， 我 们 使 下 载 述 钮 可 用 ， ,并 关闭 打开 的 文件 。 
ui->label->setText(tr(" 已 经 完成 下 载 ")); 
ui->downloadButton->setEnabled(true); 


file->close(); 
delete file; 


最 后 再 添加 一 个 if 语句 ， 处 理 list 命令 完成 时 的 情况 


If (ftp->currentCommand() == QFtp::List){ 


a (Doc Om. 0 
{ // 如 果 目 录 , 显示 “empty” 
Ui- >fileList- 和 
new QTreewWidgetItem(QStringList()<< tr("<empty>"))); 
ui->fileList->setEnabled(false); 
ui->label->setText(tr(" 该 目录 为 空 ")); 


我 们 在 list 命令 完成 时 ， 判 断 文 件 列表 是 否 为 室 ， 如 果 为 室 ， 就 让 Tree Widget 不 可 用 ， 并 
显示 “empty” 条 目 


(3 


) 添加 文件 列表 函数 的 内 容 如 下 。 


void Widget::addToList(const QUrlInfo &urlInfo) // 添 加 文件 列表 


{ 


QTreewWidgetItem *item = new QTreewWidgetItem， 

item->setText(0, urlIinfo.name()); 

item->setText(1, QString::number(urlInfo.size())); 
item->setText(2, urlInfo.owner()); 

item->setText(3, urlInfo.group()); 

item->setText(4, urlInfo.lastModified().toString("MMM dd yyyy")); 


QPixmap pixmap(urlInfo.isDir() ? "../myFtp2/dir.png" : "../myFtp2/file.png"); 
item->setIcon(0, pixmap); 


isDirectory[urlIinfo.name()] = urlIinfo.isDir(); 

// 存 储 该 路 径 是 否 为 目录 的 信息 

ui->fileList->addTopLevelIltem(item); 

If (!ui->fileList->currentIitem()) { 
ui->fileList->setCurrentItem(ui->fileList->topLevelIitem(0)); 
ui->fileList->setEnabled(true); 


} 


当 ftp->list() 函数 执行 时 会 发 射 listInfo() 信号 ， 此 时 就 会 执行 addToList() 函数 ， 在 这 
里 我 们 将 文件 信息 显示 在 Tree Widget 上 ， 并 在 ispirectory 中 存储 该 文件 的 路 径 及 其 是 否 为 
目录 的 信息 。 为 了 使 文件 与 目录 进行 区 分 ， 我 们 使 用 了 不 同 的 图 标 file.png 和 dir,png 来 表 
示 它 们 ， 这 两 个 图 标 放 在 了 工程 文件 夹 中 。 


(4) 将 构造 函数 的 内 容 更 改 如 下 。 


ui->setupUi(this); 

Ui- De a Va Ca 

/7/1 二 人 \ 该 目录 

CE 人 NA ne 
this ,SLOT(processItem(QTreewidgetItem* LINE) 


这 里 我 们 只 是 让 进度 条 的 值 为 0， 然 后 关联 了 Tree Widget 的 一 个 信号 itemActivated() ° 当 
筷 标 双击 一 个 条 目 时 ， 发 射 该 信号 ， 我 们 在 模 函 数 中 判断 该 条 目 是 否 为 目录 ， 如 果 是 则 进入 
该 目录 。 


(5) processItem() 函数 的 实现 如 下 。 


void Widget::processItem(QTreewidgetItem* item,int)  / /打开 一 个 目录 


QString name = item->text(0); 
if (isDirectory.value(name)) { // 如 果 这 个 文件 是 个 目录 ， 则 打开 
ui->fileList->clear(); 
isDirectory.clear(); 
currentPath += '/'; 
currentPath += name; 
ftp->cd(name); 
ftp->1list(); 
ui->cdToParentButton->setEnabled(true); 


(6)“ 返 回 上 一 级 目录 ”按钮 的 单 击 事件 槽 函数 如 下 。 


void Widget::on_cdToParentButton_clicked() // 返 回 上 级 目录 按钮 
{ 
ui->fileList->clear(); 
isDirectory.clear(); 
currentPath = currentPath.1left(currentPpath.JlastIindexof('/')); 
If (currentPath.isEmpty()) { 
ui->cdToParentButton->setEnabled(false); 
ftp->cd("/"); 
} else { 
ftp->cd(currentPath ) ; 


} 
ftp->1list(); 


在 返回 上 一 级 目录 时 ， 我 们 取 当 前 路 径 的 最 后 一 个 / 之 前 的 部 分 ， 如 果 此 时 路 径 为 空 了 ， 我 
们 就 让 “返回 上 一 级 目录 ”按钮 不 可 用 。 


(7)“ 下 载 "按钮 单 击 事件 档 函 数 如 下 。 


void Widget::on_downloadButton_clicked() // 下 载 按 钳 


{ 
QString fileName = ui->fileList->currentIitem()->text(0); 
file = new QFile(fileName); 
If (!file->open(QIODevice: :writeonly)) 
delete file; 
returm, 
// 下 载 按 钮 不 可 用 ， 等 下 载 完 成 后 才 可 用 
ui->downloadButton->setEnabled(false); ftp->get(ui->fileList->currentIitem()->te 


xt(0), file); 


在 这 里 我 们 获取 了 当前 项 目的 文件 名 ， 然 后 新 建文 件 ， 使 用 get() 命令 下 载 服 务 器 上 的 文件 
到 我 们 新 建 的 文件 中 。 


(8) 更 新 进度 条 函数 内 容 如 下 。 
void Widget::updateDataTransferProgress( //i 
dint64 readBytes,qint64 ee 
{ 


ui->progressBar->setMaximum(totalBytes); 
ui->progressBar->setValue(readBytes); 


3 流程 说 明 。 


整个 程序 的 流程 就 和 我 们 实现 函数 的 顺序 一 样 。 用 户 在 界面 上 输入 服务 器 的 相关 信息 ， 然 后 
我 们 利用 这 些 信 息 进 行 连接 并 登录 服务 器 ， 等 登录 服务 器 成 功 时 ， 我 们 列 出 服务 器 上 所 有 的 
文件 。 对 于 一 个 目录 ， 我 们 可 以 进入 其 中 ， 并 返回 上 一 级 目录 ， 我 们 可 以 下 载 文件 ， 并 显示 
下 载 的 进度 


对 于 [6 间 的 择 作 ， 全 部 由 那些 命令 和 信号 来 完成 ， 我 们 只 壳 要 调用 相应 的 命 邻 ， 并 在 其 
信号 时 ， 进 行 对 应 的 处 理 就 可 以 了 。 而 对 于 文件 的 显示 ， 则 是 视图 部 分 的 知识 了 。 


4 运行 程序 ， 效 果 如 下 图 所 示 。 


第 34 篇 网 络 (四 ) FTP (二 ) 


有 囊 idget 


FTPF 服 备 器 : |ftp. qt-project. org 
用 户 名 :lonymous 密码 : AILLL) 


大 小 所 尾 组 
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返回 上 一 级 目录 


辐 回国 


Qt YoOlec 


用 户 名 :lonymous 到。 [TILL 
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文件 “大 小 拥有 所 属 组 修改 日 期 | 
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已 经 完成 下 载 





结语 
最 后 需要 说 明 的 是 ， 因 为 为 了 更 好 的 讲解 知识 ， 使 得 程序 简单 化 ， 所 以 我 们 省 去 了 很 多 细节 
上 的 处 理 ， 如 果 需 要 ， 你 可 以 自己 添加 。 比 如 断 开 连接 和 取消 下 载 ， 你 都 可 以 使 用 


ftp->abort() 函数 。 你 也 可 以 参考 Qt 自 带 的 Ftp Example 例 子 。 对 于 其 他 操作 ， 比 如 上 传 
等 ， 你 可 以 根据 需要 添加 。 


FTP 的 相关 编程 就 讲 到 到 这 里 。 
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涉及 到 的 源码 下 载 
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uy 


第 35 篇 网 络 (五 ) 获取 本 机 网 络 信 


导语 
前 面 讲 完 了 HTTP 和 FTP， 下 面 本 来 该 讲解 UDP 和 和 TCP 了。 不 过 ， 在 讲解 它们 之 前 ， 我 们 先 在 
这 一 节 里 讲解 一 个 以 后 要 经 常用 到 的 名 词 ， 那 就 是 IP 地 址 。 


对 于 IP 地 址 ， 其 实 ， 会 上 网 的 人 都 应 该 听 说 过 它 。 如 果 你 实在 很 不 属性 ， 那 么 简单 的 说 : IP 即 
InternetProtocol (网 络 之 间 互 联 的 协议 )， 协 议 就 是 规则 ， 地 球 人 都 用 一 样 的 规则 ， 所 以 我 
们 可 以 访问 全 球 任何 的 网 站 ; 而 IP 地 址 就 是 你 联网 时 分 配给 你 机 子 的 一 个 地 址 。 如 果 把 网 络 
比喻 成 地 图 ， 那 IP 地 址 就 像 地 图 上 的 经 纬度 一 样 ， 它 确定 了 你 的 主机 在 网 络 中 的 位 置 。 其 实 
知道 我 们 以 后 要 用 IP 地 址 来 代表 网 络 中 的 一 台 计 莫 机 就 够 了 。 (^^ 不 一 定 科学 但 是 很 直 白 的 
表述 ) 

下 面 我 们 就 讲解 如 何 获取 自己 电脑 的 IP 地 址 以 及 其 他 网 络 信息 。 这 一 节 中 ， 我 们 会 涉及 到 网 
络 模块 ( QtNetworkModule ) 中 

的 QHostInfo ? QHostAddress ? QNetworkInterface 和 QNetworkAddressEntry 等 几 个 类 。 下 面 


是 详细 内 容 。 


环境 : Windows Xp + Qt 4.8.5+Qt Creator2.8.0 


目 系 


e 一 、 使 用 QHostInfo 获取 主机 名 和 |P 地 址 
。 二 、 通 过 QNetworkInterface 类 来 获取 本 机 的 IP 地址 和 网 络 接口 信息 


正文 
一 、 使 用 QHostInfo 获取 主机 名 和 |P 地 址 


我 们 新 建 Qt Gui 应 用 ， 项 目 名 为 myIP ， 基 类 选择 Qwidget ， 类 名 保持 widget 不 变 。 完 成 后 
先 打 开 myIP.pro 文件 ， 添 加 一 行 代 码 : QT += network ， 然 后 保存 该 文件 。 下 面 打 
开 widget.h 文件 添加 头 文件 包含 : #include <QtNetwork> 


(1) 获取 主机 名 。 


我 们 在 widget.cpp 文件 中 的 构造 函数 中 添加 代码 : 


QString localHostName = QHostInfo::localHostName(); 
qDebug() <<"localHostName: "<<localHostName; 


这 里 我 们 使 用 了 QHostInfo 类 的 localHostName 类 来 获取 本 机 的 计算 机 名 称 。 
运行 程序 ， 在 下 面 的 应 用 程序 输出 栏 里 的 信息 如 下 : 
应 


应 用 程序 输出 
myIF 加 








E:\huild-myIP-Desktop Qt 4 8 5-Dehug\debhug' 
localHostName: npC-201301041335" 


可 以 看 到 ， 这 里 获取 了 计算 机 名 。 我 们 可 以 在 划 面 上 "我 的 电脑 "图标 上 点 击 息 标 右 键 ， 然 后 选 
择 “ 属 性 ”菜单 ， 查 看 “计算 机 名 ”一 项 ， 和 这 里 输出 结果 是 一 样 的 ， 如 下 图 。 








Windows 使 用 以 下 信息 在 网 络 中 标识 这 台 计 算 机 。 





计算 机 描述 m: | 


举例 : “Kitchen Computer” 或 “Nary s 
Computer"s 


二 i1 和 机 名 次， E2103] 


于 必 短 : WORKGROUP 


要 使 用 网 络 标 站 四 导 庆 加 入 域 并 创建 本 地 用 户 帐 
户 ， 请 申 击 “ 问 给 了 


要 重新 命名 此 计算 机 或 加 入 域 ， 单 击 “ 更 改 ”。 

















(2) 获取 本 机 的 |P 地 址 。 
我 们 继续 在 构造 函数 中 添加 代码 : 


QHostInfo info = QHostInfo::fromName(localHostName); 
gqDebug() <<"IP Address: "<<info.addresses(); 


调用 QHostInfo 类 的 fromName() 函数 ， 使 用 上 面 获得 的 主机 名 为 参数 ， 来 获取 本 机 的 信息 。 
然后 再 利用 QHostInfo 类 的 addresses() 函数 ， 获 取 本 机 的 所 有 IP 地 址 信息 。 运 行程 序 ， 输 出 
信息 如 下 : 


Co 


CD 


[Ih®) 


应 用 程序 输出 





myIP 国 


E:\huild-myIP-Desktop Qt 4 8 5-Dehug\debhug\myI 

localHostName: "PC-201301041335" 

IP hddress: IQHosthddress{"192.168.1.81") ) 
在 我 这 里 只 有 一 条 IP 地 址 。 但 是 ， 在 其 他 系统 上 ， 可 能 出 现 多 条 IP 地 址 ， 其 中 可 能 包含 了 IPv4 
和 |Pv6 的 地 址 ， 一 般 我 们 需要 使 用 IPv4 的 地 址 ， 所 以 我 们 可 以 只 输出 IPv4 的 地 址 。 


我 们 继续 添加 代码 : 


foreach(QHostAddress address, info.addresses() ) 


If(address.protocol() == QAbstractSocket::IPv4Protocol) 
qDebug() << address.toString(); 


因为 IP 地 址 由 QHostAddress 类 来 管理 ， 所 以 我 们 可 以 使 用 该 类 来 获取 一 条 IP 地 址 ， 然 后 使 用 
该 类 的 protocol() 函数 来 判断 其 是 否 为 IPv4 地 址 。 如 果 是 I|Pv6 地 址 ， 可 以 使 
用 QAbstractSocket::IPv6Protocol 来 判断 。 最 后 我 们 将 IP 地 址 以 Qstring 类 型 输出 。 


我 们 以 后 要 使 用 的 IP 地 址 都 是 用 这 个 方法 获得 的 ， 所 以 这 个 一 定 要 掌握 。 运 行 效果 如 下 : 





myIPF 国 


E:\huild-myIP-Desktop Qt 4 8 5-Dehug\debhug\my. 
localHostName: NDE=>201 人 0335" 
IP Address: (QHostAddress ("192.168.1.81") ) 


于 二 全 咏 守 二 闪闪 二 二 各 重生 交 





(3) 以 主机 名 获取 IP 地 址 。 


在 上 面 讲述 了 用 本 机 的 计算 机 名 获取 本 机 的 |P 地 址 。 其 实 QHostInfo 类 也 可 以 用 来 获取 任意 主 
机 名 的 IP 地 址 ， 如 一 个 网 站 的 IP 地 址 。 在 这 里 我 们 可 以 使 用 lookupHost() 函数 。 它 是 基于 信 
号 和 槽 的 ， 一 旦 查找 到 了 IP 地 址 ， 就 会 触发 槽 函数 。 具 体 用 法 如 下 。 


我 们 在 widget.h 文件 中 添加 一 个 私有 槽 函数 : 


private slots: 
void lookedUp(const QHostInfo &host); 


然后 在 widget.cpp 中 的 构造 函数 中 先 将 上 面 添加 的 代码 全 部 注释 (可 以 通过 选中 所 有 代码 ， 
然后 按 下 ctrl+/ 快捷 键 来 注释 代码 ) ， 然 后 添加 以 下 代码 : 


QHostInfo: :LIookupHost("www.qter.org"， 
this,SLOT(lookedUp(QHostInfo))); 


这 里 我 们 查询 Qter 开 源 社区 的 IP 地 址 ， 如 果 查 找到 ， 就 会 执行 我 们 的 lookedup() 函数 。 
在 widget.cpp 中 添加 lookedup() 函数 的 实现 代码 : 


void Widget::lookedUp(const QHostInfo &host ) 


qDebug() << host.addresses().first().toString(); 


这 里 我 们 只 是 简单 地 输出 第 一 个 IP 地 址 。 输 出 信息 如 下 : 


应 用 程序 输出 a 中 
nyIF 加 


E:\huild-myIP-Desktop 
nA42.96.139.134" 


其 实 ， 我 们 也 可 以 使 用 lookupHost() 函数 ， 通 过 输入 IP 地 址 反 向 查找 主机 名 ， 只 需要 将 上 面 
代码 中 的 www.qter.org 换 成 一 个 IP 地 址 就 可 以 了 ， 如 果 你 有 兴趣 可 以 研究 一 下 ， 不 过 返回 的 
结果 可 能 不 是 你 想象 中 的 那样 。 


可 以 看 到 QHostInfo 类 的 作用 : 通过 主机 名 来 查找 IP 地 址 ， 或 者 通过 |P 地 址 来 反 向 查找 主机 
多 oo 


二 、 通 过 QNetworkInterface 类 来 获取 本 机 的 IP 地 址 和 网 络 接口 信息 


QNetworkInterface 类 提供 了 程序 所 运行 时 的 主机 的 IP 地 址 和 网 络 接口 信息 的 列表 。 在 每 一 个 
网 络 接口 信息 中 都 包含 了 0 个 或 多 个 IP 地 址 ， 而 每 一 个 IP 地 址 又 包含 了 和 它 相 关 的 子 网 掩 码 和 
广播 地 址 ， 它 们 三 者 被 封装 在 一 个 QNetworkAddressEntry 对 象 中 。 网 络 接口 信息 中 也 提供 了 硬 
件 地 址 信息 。 我 们 将 widge.cpp 构造 函数 中 以 前 添加 的 代码 注释 看， 然后 添加 以 下 代码 。 


// 获 取 所 有 网 络 接口 的 列表 
QList<QNetworkInterface> list = = QNetworkInterface: :allInterfaces(); 
foreach(QNetworkInterface interface,1ist) // 侈 历 每 一 个 网 络 接口 


Are ug << "Device: "<<interface.name(); // 设 备 名 
// 硬 件 地 址 


qDebug() << "HardwareAddress: "<<interface.hardwareAddress(); 


日 列 表 要 每 


Re 
各 一 个 厂 描 寺 


// 获 取 IP 地 

人 全 网 
人 entryList= interface a 
foreach(QNetworkAddressEntry entry,entryList)// 驳 历 每 个 IP 地 址 条 目 





一 个 IP 地 址 ， 





qDebug()<<"IP Address: "<<entry.ip().toString(); //IP 地 址 
qDebug()<<"Netmask: "<<entry.netmask().toString(); / /村 
qDebug()<<"Broadcast: "<<entry.broadcast().toString();// 让 4 





这 里 我 们 获取 了 本 机 的 网 络 设备 的 相关 信息 。 运 行程 序 ， 输 出 如 下 : 


应 用 程序 输出 





myIPF 国 


E:\bhuild-myIP-Desktop Qt 4 8 5-Debhug\debhug\myIP.e: 
Device: "{DF24512B-A723-4330-=A6F0-395ED2F26A19}" 
Hardwarehiddress: 本 

IP adresss "19.1660..81" 
Mobeniss.2aSO 


Broadcast: ee 4 





Device: "MS TCP Loophack interface" 
HardwareAddress: ee 

EP: hol ees de 

Netmask: a 

Broadcast: Dl 


其 实 ， 如 果 我 们 只 想 利 用 QNetworkInterface 类 来 获取 |IP 地 址 ， 那 么 就 没 必 要 像 上 面 那 样 复 
杂 ， 这 个 类 提供 了 一 个 便捷 的 函数 allAddresses() 来 获取 IP 地 址 ， 例 如 : 


QString address = QNetworkInterface::allAddresses().first().toSstring(); 


在 这 一 节 中 我 们 学 习 了 如 何 来 查找 本 机 网 络 设备 的 相关 信息 。 其 实 ， 以 后 最 常用 的 还 是 其 中 
获取 IP 地 址 的 方法 。 我 们 以 后 可 以 利用 一 个 函数 来 获取 IP 地 址 : 


QString Widget::getIP()  // 获 取 ip 地 址 


{ 
QList<QHostAddress> 1ist = QNetworkInterface::allAddresses(); 
foreach (QHostAddress address, 1ist) 
// 我 们 使 用 IPv4 地 址 
If(address.protocol() == QAbstractSocket::IPv4Protocol) 
return address.toString(); 
eturn op 
} 


这 一 节 就 讲 到 这 里 ， 在 下 面 的 几 节 中 我 们 将 利用 IP 地 址 进行 UDP 和 TCP 的 编程 。 


涉及 的 源码 


| 


第 36 篇 网 络 (六 ) UDP 


导语 


这 一 节 讲 述 UDP 编 程 的 知识 。UDP (UserDatagram Protocol 即 用 户 数 据 报 协议 ) 是 一 个 轻 量 
级 的 ， 不 可 靠 的 ， 面 向 数据 报 的 无 连接 协议 。 对 于 UDP 我 们 不 再 进行 过 多 介绍 ， 如 果 你 对 
UDP 不 是 很 了 解 ， 而 且 不 知道 它 有 什么 用 ， 那 么 这 里 就 举 个 简单 的 例子 : 我 们 现在 几乎 每 个 
人 都 使 用 的 腾讯 QQ， 其 聊天 时 就 是 使 用 UDP 协 议 进 行 消息 发 送 的 。 就 像 QQ 那 样 ， 当 有 很 多 
用 户 ， 发 送 的 大 部 分 都 是 短 消息 ， 要 求 能 及 时 响应 ， 并 且 对 安全 性 要 求 不 是 很 高 的 情况 下 使 
用 UDP 协议 。 


在 Qt 中 提供 了 Qudpsocket 类 来 进行 UDP 数据 报 (datagrams) 的 发 送 和 接收 。 这 里 我 们 还 要 
了 解 一 个 名 词 Socket， 也 就 是 常 说 的 “ 套 接 字 ”。 Socket 简 单 地 说 ， 就 是 一 个 |P 地 址 加 一 个 port 
端口 。 因 为 我 们 要 传输 数据 ， 就 要 知道 往 哪个 机 子 上 传送 ， 而 IP 地 址 确定 了 一 台 主 机 ， 但 是 
这 台 机 子 上 可 能 运行 着 各 种 各 样 的 网 络 程序 ， 我 们 要 人 往 哪个 程序 中 发 送 呢 ? 这 时 就 要 使 用 一 
个 端口 来 指定 UDP 程序 。 所 以 说 ，Socket 指 明了 数据 报 传输 的 路 径 。 


下 面 我 们 将 编写 两 个 程序 ， 一 个 用 来 发 送 数 据 报 ， 可 以 叫做 客户 端 ; 另 一 个 用 来 接收 数据 
报 ， 可 以 叫做 服务 器 端 ， 它 们 均 应 用 UDP 协议 。 这 样 也 就 构成 了 所 谓 的 C/S (客户 端 /服务 
器 ) 编程 模型 。 我 们 会 在 编写 程序 的 过 程 中 讲解 一 些 相 关 的 网 络 知识 。 


环境 : Windows Xp + Qt 4.8.5+QtCreator 2.8.0 


目 系 


。 一 、 发 送 端 (客户 端 ) 
。 二 、 接 收 端 (服务 器 端 ) 


正文 


一 、 发 送 端 (客户 端 ) 


1 新 建 Qt Gui 应 用 。 项 目 名 为 udpsender ， 基 类 选择 Qwidget ， 类 名 为 widget 。 完 成 后 
在 udpsender.pro 文件 中 添加 一 行 代码 : QT += network ， 并 保存 该 文件 。 


2 .在 widget.ui 文件 中 ， 往 界面 上 添加 一 个 push Button ， 更 改 其 显示 文本 为 "开始 广播 "”， 
然后 进入 其 单 击 事件 构 郊 数 。 


3 我 们 在 widget.h 文件 中 更 改 。 


添加 头 文件 : #include <QtNetwork> 

添加 private 私 有 对 象 : Qudpsocket *sender; 

4 我 们 在 widget,.cpp 中 进行 更 改 。 

在 构造 函数 中 添加 。 sender = new QUdpSocket(this); 


更 改 * 开 始 广播 "按钮 的 单 击 事 件 档 函数 : 


void Widget::on_pushButton_clicked() // 开始 广播 


{ 
QByteArray datagram = "hello world!"; 
sender->writeDatagram(datagram.data(),datagram. size(), 
QHostAddress: :Broadcast, 45454); 
} 


这 里 定义 了 一 个 QByteArray 类 型 的 数据 报 datagram ， 其 内 容 为 “hello world!”。 然 后 我 们 使 

用 QUdpSocket 类 的 writeDatagram() 函数 来 发 送 数 据 报 2 这 个 函数 有 四 个 参数 a 分 别 是 数据 
报 的 内 容 ， 数 据 报 的 大 小 ， 主 机 地 址 和 端口 号 。 对 于 数据 报 的 大 小 ， 它 根据 平台 的 不 同 而 不 
同 ， 但 是 这 里 建议 不 要 超过 512 字 节 。 这 里 使 用 了 广播 地 址 QHostAddress::Broadcast ， 这 样 就 
可 以 同时 给 网 络 中 所 有 的 主机 发 送 数 据 报 了 。 对 于 端口 号 ， 它 是 可 以 随意 指定 的 ， 但 是 一 般 
1024 以 下 的 端口 号 通常 属于 保留 端口 号 ， 所 以 我 们 最 好 使 用 大 于 1024 的 端口 ， 最 大 为 
65535。 我 们 这 里 使 用 了 45454 这 个 端口 号 ， 一 定 要 注意 ， 在 下 面 要 讲 的 服务 器 程序 中 ， 也 要 
使 用 相同 的 端口 号 。 


5. 发送 端 就 这 么 简单 ， 下 面 可 以 先 运行 程序 。 


1 新 建 Qt Gui 应 用 


工程 名 为 udpReceiver ， 基 类 选择 QWidget， 类 名 为 widget 。 完 成 后 在 udpsender.pro 文件 
中 添加 一 行 代 码 : QT += network ， 并 保存 该 文件 。 


此 时 工程 文件 列表 中 应 包含 两 个 项 目 ， 如 下 图 。 





已 fo udpReceiver 
udpReceliver. pro 
er maln. cpp 
er widget. cpp 
h, widget. 上 
图 wideet. ul 

日 [rt] udpSender 
巩 udpSender. pro 
er main. cpp 
er widget. cpp 
hh widget.h 
wideet. ul 


2 我 们 在 udpReceiver 项 目 中 的 widget.ui 文件 中 ， 向 界面 上 添加 一 个 Label 部 件 ， 更 改 其 
显示 文本 为 “等 待 接收 数据 | "， 效 果 如 下 。 


3 我 们 在 udpReceiver 工程 中 的 widget,h 文件 中 更 改 。 
添加 头 文件 : #include <QtNetwork> 
添加 private 私 有 对 象 : Qudpsocket *receiver; 


添加 私有 槽 函数 : 


private slots: 
void processPendingDatagram( ); 


4 我 们 在 udpReceiver 工程 中 的 widget.cpp 文件 中 更 改 。 
在 构造 函数 中 : 


receiver = new QUdpSocket(this); 
receiver->bind(45454,QUdpSocket: :ShareAddress ) ; 
connect(receiver,SIGNAL(readyRead()), 
this,SLOT(processPendingDatagram( ))); 


我 们 在 构造 函数 中 将 receiver 绑 定 到 45454 端 口 ， 这 个 端口 就 是 上 面 发 送 端 设置 的 端口 ， 二 

者 必须 一 样 才 能 保证 接收 到 人 。 这 里 使 用 了 绑 定 模式 Qudpsocket: :ShareAddress ， 它 表明 
其 他 服务 也 可 以 绑 定 到 这 个 端口 上 。 因 为 当 receiver 发 现 有 数据 报到 达 时 就 会 发 

出 readyRead() 信号 ， 所 以 将 其 和 数据 报 处 理 函 数 相关 联 。 


数据 报 处 理 楼 函数 实现 如 下 : 


void Widget::processPendingDatagram() // 处 理 





while(receiver->hasPendingDatagrams()) 





让 datagram 的 大 小 为 等 待 处 完整 的 数据 
datagran， resize(receiver- Se oD 
// 接 收 数据 报 ， 将 其 存放 到 datagram 中 
receiver- >readDatagran( datagran, data( ),datagram. size( )); 
// 将 数据 报 内 容 显 示 出 半 


Ui- i CT ( datagram); 


5. 我 们 在 项 目 列表 中 udpReceiver 项 目 上 点 击 息 标 右键 ， 在 弹出 的 菜单 上 选择 run 菜 单 来 运行 
该 工程 。 如 下 图 所 示 。 


A ANA rv ( 一 - 门口 
宙 DO 届 风 给 7 UDP 





将 "udpReceiver" 设 : 
构建 
执行 amalke 













国 到 udpSender 重新 构建 
欧 udpSen 清除 


6 : 第 一 次 运行 该 程序 时 ， 系 统 可 能 会 提示 警告 ， 我 们 选择 “解除 阻止 "。 注意 ， 如 果 是 在 linux 
下 ， 你 可 能 还 需要 关闭 防火 墙 。 

7 我 们 同时 再 运行 udpsender 程序 。 然 后 点 击 其 上 的 “发送 广 播 " 按 钮 ， 这 时 会 

在 udpReceiver 上 显示 数据 报 的 内 容 。 效 果 如 下 。 


有 Widget 






同 回 西 


hello world! 


可 以 看 到 ，UDP 的 应 用 是 很 简单 的 。 我 们 只 需要 在 发 送 端 执行 writepatagram() 函数 进行 数据 
报 的 发 送 ， 然 后 在 接收 端 绑 定 端口 ， 并 关联 readyRead() 信号 和 数据 报 处 理 函 数 即 可 。 


下 一 节 我 们 讲述 TCP 的 应 用 。 
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涉及 到 的 源码 : 


e。 udpSender.rar 
。 udpReceiver.rar 
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第 37 篇 网 络 (七 ) TCP (一 ) 


导语 


TCP 即 TransmissionControl Protocol， 传 输 控 制 协议 。 与 UDP 不 同 ， 它 是 面向 连接 和 数据 流 
的 可 靠 传输 协议 。 也 就 是 说 ， 它 能 使 一 台 计 算 机 上 的 数据 无 差错 的 发 往 网 络 上 的 其 他 计算 
机 ， 所 以 当 要 传输 大 量 数据 时 ， 我 们 选用 TCP 协 议 。 


TCP 协 议 的 程序 使 用 的 是 客户 端 /服务 器 (C/S) 模式 ， 在 Qt 中 提供 了 QTcpsocket 类 来 编写 客 
户 端 程序 ， 使 用 QTcpserver 类 编写 服务 器 端 程序 。 我 们 在 服务 器 端 进行 端口 的 ， 一 旦 发 现 客 
户 端的 连接 请 求 ， 就 会 发 出 newConnection() 信号 ， 可 以 关联 这 个 信号 到 我 们 自己 的 槽 进行 数 
据 的 发 送 。 而 在 客户 端 ， 一 旦 有 数据 到 来 就 会 发 出 readyRead ( ) 信号 ， 可 以 关联 此 信号 进行 数 
据 的 接收 。 其 实 ， 在 程序 中 最 难 理解 的 地 方 就 是 程序 的 发 送 和 接收 了 ， 为 了 让 大 家 更 好 的 理 
解 ， 我 们 在 这 一 节 只 是 讲述 一 个 传输 简单 的 字符 串 的 例子 ， 在 下 一 节 再 进行 扩展 ， 实 现任 意 
文件 的 传输 。 


环境 : Windows Xp + Qt 4.8.5+Qt Creator2.8.0 


一 、 服 务 器 端 


在 服务 器 端的 程序 中 ， 我 们 本 地 主机 的 一 个 端口 ， 这 里 使 用 6666， 然 后 关 
联 newConnection() 信号 与 自己 写 的 sendMessage() 槽 。 就 是 说 一 旦 有 客户 端的 连接 请 求 ， 就 
会 执行 sendMessage() 函数 ， 在 这 个 函数 里 我 们 发 送 一 个 简单 的 字符 囊 。 


1 新 建 QtGui 应 用 


项 目 名 为 tcpserver ， 基 类 选择 Qwidget ， 类 名 为 widget 。 完 成 后 打开 项 目 文 
件 tcpServer .pro 并 添加 一 行 代码 QT += network ， 然后 保存 该 文件 9 


2 在 widget.ui 的 设计 区 添加 一 个 Label ， 更 改 其 显示 文本 为 “等 待 连接 *， 然 后 更 改 
其 objectName 为 statusLabel ， 用 于 显示 一 些 状态 信息 ° 


3 在 widget.h 文件 中 做 以 下 更 改 。 


添加 头 文件 : #include <QtNetwork> 
添加 private 对 象 : QTcpserver *tcpServer; 


添加 私有 模 : 


private Slots : 
void sendMessage(); 


4 .在 widget.cpp 文件 中 进行 更 改 。 


在 其 构造 函数 中 添加 代码 : 


tcpServer = new QTcpServer(this); 

if(!tcpServer- >listen(QHostAddress::LocalHost, 6666)) 

{ // 本 地 主机 的 6666 端 口 ， 如 果 出 错 就 输出 错 i 
qDebug() << tcpServer->errorString(); 
close(); 





筷 ， 并 关闭 





// 连 接 信号 和 相应 模子 半 
COC or er SIGNAL(newConnection()),this,SsSLoT(sendMessage( ))); 


我 们 在 构造 函数 中 使 用 tcpserver 的 listen() 函数 进行 ， 然 后 关联 了 newconnection() 和 我 
们 自己 的 sendMessage() 函数 。 


下 面 我 们 实现 sendMessage() 函数 。 


void Widget::sendMessage() 

{ a pe 
// 用 于 暂 存 我 们 要 发 送 的 数据 
QByteArray block; 





ODa iatr eh out(&block,QIODevice: :WriteOnly); 






? 服 务 妥 





// 设 置 数据 流 的 涡 使 用 的 版 本 要 相同 
out. te ME 4_6); 





out<<(quint16) 0; 

out<<tr("hello Tecp!!!"); 

out.device( )->seek(0); 

out<<(quint16) (block.size() - sizeof(qguint16)); 





人 II = tcpServer->nextPendingCconnection( ) ; 


connect(clientConnection,SIGNAL(disconnected()),cilientConnection, 
SLoT(deleteLater())); 

clientConnection->write(block); 

clientConnection->disconnectFromHost(); 





// 发 送 数 据 成 功 后 ， 显 示 提 示 
Ui- Sl a message successful!!!"); 


这 个 是 数据 发 送 函 数 ， 我 们 主要 介绍 


(1) 为 了 保证 在 客户 端 能 接收 到 完整 的 文件 ， 我 们 都 在 数据 流 的 最 开始 写 入 完整 文件 的 大 小 
信息 ， 这 样 客户 端 就 可 以 根据 大 小 信息 来 判断 是 否 接 受到 了 完整 的 文件 。 而 在 服务 器 端 在 
发 送 数 据 时 就 要 首先 发 送 实际 文件 的 大 小 信息 ， 但 是 ， 文 件 的 大 小 一 开始 是 无 法 预知 的 ， 所 
以 这 里 先 使 用 了 out<<(quint16) 0; 在 block 的 开始 添加 了 一 个 quint16 大 小 的 空间 ， 也 就 是 
两 字 节 的 空间 ， 它 用 于 后 面 放置 文件 的 大 小 信息 。 然 后 out<<tr("hello Tcplll"); 输入 实际 的 
文件 ， 这 里 是 字符 事 。 当 文件 输入 完成 后 我 们 再 使 用 out ,device()->seek(9); 返回 到 plock 的 
开始 ， 加 入 实际 的 文件 大 小 信息 ， 也 就 是 后 面 的 代码 ， 它 是 实际 文件 的 大 
小 5 out<<(quint16) (block.size() - sizeof(quint16)); 

(2) 在 服务 器 端 我 们 可 以 使 用 tcpserver 的 nextPendingconnection() 函数 来 获取 已 经 建立 的 
连接 的 Tcp 套 接 字 ， 使 用 它 来 完成 数据 的 发 送 和 其 它 操 作 。 比 如 这 里 ， 我 们 关联 
了 disconnected() 信号 和 deleteLater() 楷 ， 然 后 我 们 发 送 数 据 


clientConnection->write(block); 


然后 是 clientConnection->disconnectFromHost(); 


它 表示 当 发 送 完 成 时 就 会 断 开 连接 ， 这 时 就 会 发 出 disconnected() 信号 ， 而 最 后 调 
用 deleteLater() 函数 保证 在 关闭 连接 后 删 除 该 套 接 字 clientConnection ° 


5 这 样 服务 器 的 程序 就 完成 了 ， 可 以 先 运行 一 下 程序 。 

二 、 客 户 端 

我 们 在 客户 端 程序 中 向 服务 器 发 送 连接 请 求 ， 当 连接 成 功 时 接收 服务 器 发 送 的 数据 。 
1 新 建 Qt Gui 应 用 ， 


项 目 名 tcpClient ， 基 类 选择 QWidget ， 类 名 为 Widget ° 完成 后 打开 项 目 文 
件 tcpclient.pro 并 添加 一 行 代码 : QT += network ， 然 后 保存 该 文件 。 


2 我 们 在 widget.ui 中 添加 几 个 标签 Label 和 两 个 Line Edit 以 及 一 个 按钮 push Button 。 
设计 效果 如 下 图 所 示 。 


主机 : 
端口 号 
m mn 
收 到 的 信息 .. 
连接 
醒 一 四 LJ 


其 中 “主机 "后 的 LineEdit 的 objectName 为 hostLineEdit ，“ 端 口号 ”后 的 为 portLineEdit ° 
“ 收 到 的 信息 ”标签 的 objectName 为 messageLabel “。 

3 .在 widget.h 文件 中 做 更 改 。 

添加 头 文件 : #include <QtNetwork> 


添加 private 受 量 : 


QTcpSocket *tcpSocket ; 
QString message;  // 和 存放) 





添加 私有 模 : 


private Slots : 
void newConnect(); // 连 
void readMessage(); // 3 

void displayError(QAbstractSocket::SocketError); // 显 示 错 误 





4 .在 widget.cpp 文件 中 做 更 改 。 


(1) 在 构造 函数 中 添加 代码 : 


tcpSocket = new QTcpSocket(this); 

connect(tcpSocket,SIGNAL(readyRead()),this,SsSLoT(readMessage())); 

connect(tcpSocket,SIGNAL(error(QAbstractSocket: :SocketError)), 
this,SLOT(displayError(QAbstractSocket::SocketError))); 


这 里 关联 了 tcpsocket 的 两 个 信号 ， 当 有 数据 到 来 时 发 出 readyRead() 信号 ， 我 们 执行 读 取 数 
据 的 readMessage() 函数 。 当 出 现 错 误 时 发 出 error() 信号 ， 我 们 执行 displayError() 槽 函 
数 。 


(2) 实 现 newconnect() 地 数 。 


void Widget: :newConnect() 


blockSize = 0; // 初 始 化 其 为 9 
tcpSocket - >abort(); // 取 消 已 有 的 连接 


// 连 接 到 主机 ， 这 里 从 界面 获取 主机 地 址 和 端口 号 
tcpSocket->connectToHost(ui- em 
Ui->portLineEdit->text().toInt()); 





这 个 函数 实现 了 连接 到 服务 器 ， 下 面 会 在 “连接 "按钮 的 单 击 事件 模 郊 数 中 调用 这 个 函数 。 


(3) 实现 readMessage() 函数 。 


void Widget::readMessage() 

{ 
QDataStream in(tcpSocket); 
In ， ream: :Qt 4 6); 
// 设 置 数据 流 版 本 ， 这 里 要 ee A 
if(blockSize==0) /去 
{ 











// 判 断 接 公 
// 如 果 E D1OCKS42e 变量 中 ， 接 
if(tcpSocket->bytesAvailable() < 人 return; 
In >> blockSize; 


if(tcpSocket- >bytesAvailable( ) < 和 return; 
// 如 果 没 有 4 得 到 : 全 部 的 并 数据 ， 风 ] 六 反 回 ， 继 允 接站 

in >> message; 

// 将 接收 到 的 数据 存放 到 变量 中 

ui->messageLabel- >setText (message); 

// 显 示 接 收 到 的 数据 





2 


这 个 函数 实现 了 数据 的 接收 ， 它 与 服务 器 端的 发 送 函 数 相对 应 。 首 先 我 们 要 获取 文件 的 大 小 
信息 ， 然 后 根据 文件 的 大 小 来 判断 是 否 接收 到 了 完整 的 文件 。 


(4) 实 现 displayError() 子 数 。 


void Widget::displayError(QAbstractSocket::SocketError) 


qDebug() << tcpSocket->errorString(); // 输 出 错 训 





里 简单 的 实现 了 错误 信息 的 输出 。 


(5) 我 们 在 widget.ui 中 进入 “连接 ”按钮 的 单 击 事件 槽 函数 ， 然 后 更 改 如 下 。 


void Widget::on_pushButton_clicked() // 连 接 按 鱼 
{ 


} 


newConnect(); // 请 求 连接 


这 里 直接 调用 了 newConnect() 函数 。 


第 37 篇 网 络 (七 ) TCP (一 


5 我 们 运行 程序 ， 同 时 运行 服务 器 程序 ， 然 后 在 “主机 "后 填 入 “localhost"， 在 “端口 号 "后 填 
入 “6666”， 点 击 “ 连 接 "按钮 ， 效 果 如 下 。 






| 夏 1dget 


send message stccesstullll 






有 ¥idget 








localhost 

















hello Teplll 


可 以 看 到 我 们 正确 地 接收 到 了 数据 。 因 为 服务 器 端 和 客户 端 是 在 同一 人 台 机 子 上 运行 的 ， 所 以 
我 这 里 填写 了 "主机 ?为 "localhost?， 如 果 你 在 不 同 的 机 子 上 运行 ， 需 要 在 “主机 "后 填写 其 正确 
的 |P 地 址 。 


结语 


到 这 里 我 们 最 简单 的 TCP 应 用 程序 就 完成 了 ， 在 下 一 节 我 们 将 会 对 它 进行 扩展 ， 实 现任 意 文 
件 的 传输 。 
涉及 到 的 源码 : 


e tcpServer.rar 
e tcpClient.rar 
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第 38 篇 网 络 (和 八 ) TCP (二 ) 


导语 


在 上 一 节 里 我 们 使 用 TCP 服 务 器 发 送 一 个 字符 事 ， 然 后 在 TCP 客 户 端 进行 接收 。 在 这 一 节 将 
重新 写 一 个 客户 端 程序 和 一 个 服务 器 程序 ， 这 次 实现 客户 端 进行 文件 的 发 送 ， 服 务 器 进行 刀 
件 的 接收 。 有 了 上 一 节 的 基础 ， 这 一 节 的 内 容 就 很 好 理解 了 ， 注 意 一 下 几 个 信号 和 槽 的 关 
即 可 。 当 然 ， 我 们 这 次 要 更 深入 了 解 一 下 数据 的 发 送 和 接收 的 处 理 方法 。 


环境 : Windows Xp + Qt 4.8.5+QtCreator 2.8.0 


一 、 客 户 站 
这 次 先 讲解 客户 端 ， 在 客户 端 里 需要 与 服务 器 进行 连接 ， 一 旦 连接 成 功 ， 就 会 发 
出 connected() 信号 ， 这 时 我 们 就 进行 文件 的 发 送 


在 上 一 节 已 经 看 到 ， 发 送 数据 时 先 发 送 了 数据 的 大 小 信息 。 这 一 次 ， 我 们 要 先 发 送 文件 的 总 
大 小 ， 然 后 文件 名 长 度 ， 然 后 是 文件 名 ， 这 三 部 分 合 称 为 文件 头 结构 ， 最 后 再 发 送 文件 数 
据 。 所 以 在 发 送 函 数 里 就 要 进行 相应 的 处 理 ， 当 然 ， 在 服务 器 的 接收 函数 里 也 要 进行 相应 的 
处 理 。 对 于 文件 大 小 ， 这 次 使 用 了 qint64 ， 它 是 64 位 的 ， 可 以 表示 一 个 很 大 的 文件 了 。 

1 新 建 QtGui 项 目 

名 称 为 tcpSender ， 基 类 选择 QWidget ， 类 名 为 Widget ， 完成 后 打开 tcpSender .pro 添加 一 


行 代码 : QT += network 。 


2 我 们 在 widget.ui 文件 中 将 界面 设计 如 下 。 








端口 : .| | 
a _ 
mm 
状态 : 等 待 打开 文件 
年 
国 一 一 和 一 站 


这 里 “主机 ?后 的 Line Edit 的 objectName 为 hostLineEdit ; “端口 "后 

的 Line Edit 的 objectName 为 portLineEdit ;下 面 

的 progress Bar 的 objectName 为 clientProgressBar ， 其 value 属性 设 为 0 ;“ 状 

态 ”Label 的 objetName 为 clientstatusLabel ; “打开” 按钮 的 objectName 为 openButton 


送 " 按 钮 的 objectName 为 sendButton 。 
3 .在 widget.h 文件 中 进行 更 改 。 
(1) 添加 头 文件 包含 #include <QtNetwork> 


(2) 添加 private 变量 : 


QTcpSocket *tcpClient; 
QFile *1ocalFile;  // 要 发 送 的 文件 
qint64 totalBytes;  // 效 据 总 
qint64 byteswritten; /1/[ 己 # 
qint64 bytesTowrite; // 剩 # 
qint64 loadSize;  // 每 次 发 
QString fileName; // 集 

QByteArray outBlock;  // 效 










(3) 添加 私有 槽 函数 : 


private Slots : 
void send()， // 连 接 服务 器 
VomomsEarntmansiern (ee/ 
void updateClientProgress(qint64); // 发 据 ， 更 新 六 
void displayError(QAbstractSocket::SocketError); // 显 示 错 误 
void openFile(); // 打 开 文 件 
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发 送 文件 大 小 等 信和 





4 .在 widget.cpp 文件 中 进行 更 改 
添加 头 文件 : #include <QFileDialog> 


(1) 在 构造 函数 中 添加 代码 : 


loadSize = 4*1024; 

totalBytes = 0; 

byteswritten = 0; 

bytesTowrite = 0; 

tcpClient = new QTcpSocket (this); 

// 当 连接 服务 器 成 功 时 ， 发 出 connected() 信 号 ， 

connect (tepel ient, SIGNAL (connected( )), thnas en 

WE 当 有 六 们 更 新 进 上 及 条 

connect (tcpclient, SIGNAL(byteswritten(qint64)),this, 
SLOT(updateClientProgress(qint64))); 

connect(tcpClient,SIGNAL(error(QAbstractSocket::SocketError)),this, 
se :SocketError))); 

// 开 始 使 ”发 送 “ 按 钮 不 可 用 

Ui- ne >setEnabled(false); 





开始 传送 文件 





我 们 主要 是 进行 了 变量 的 初始 化 和 几 个 信号 和 模 通 数 的 关联 。 


(2) 实现 打开 文件 函数 。 


void Widget: :openFile() WE NT er Se 


fileName = QFileDialog::getOpenFileName(this); 
if(!fileName.isEmpty()) 
{ 


ui->sendButton->setEnabled(true); 
ui->clientStatusLabel->setText(tr(" 打 开 文 件 %1 成 功 !") 
.arg(fileName)); 


该 函数 将 在 下 面 的 “打开 ”按钮 单 击 事件 槽 函数 中 调用 。 


(3) 实现 连接 函数 。 





void Widget::send() VE 
{ 
ui->sendButton->setEnabled(false); 
byte swWineten = 0; 
// 初 始 化 已 发 送 字 节 为 0 
ui->clientStatusLabel->setText(tr(" 连 接 中 ,..")); 
tcpClient->connectToHost(ui->hostLineEdit->text(), 


ui->portLineEdit->text().,toInt());// 连 接 


该 函数 将 在 “发送 "按钮 的 单 击 事 件 楼 函数 中 调用 。 
(4) 实现 文件 头 结 构 的 发 送 





void Widget::startTransfer() // 实 现 文件 大 小 等 
{ 
localFile = new QFile(fileName); 
if(!localFile->open(QFile: :ReadOonly)) 


qdDebug() << "open file error!"; 
returm, 


} 


/7 文件 总 大 小 
totalBytes = localFile->size(); 


QDataStream sendOut(&outBlock,QIODevice: :Writeonly); 
Sendout ,setVersion(QDataStream: :Qt 4 6); 
QString currentFileName = fileName.right(fileName.size() 
- fileName.lastIindexof('/')-1); 





// 依 次 写 入 总 大 小 信息 空间 ， 文 件 名 大 小 信息 空间 ， 文 件 名 
Sendout << qint64(0) << qint64(0) << currentFileName; 






// 这 里 的 总 大 小 是 文件 名 大 小 等 信息 和 实际 文件 大 小 的 总 和 
totalBytes += outBlock.size(); 


条 


Sendout .device()->seek(0); 
// 返 回 OutBo1lLock 的 开始 ， 用 实际 的 大 小 信息 代替 两 个 qint64(9) 空 间 
2 - Sizeof(qint64)*2)); 


// 发 送 完 头 数据 后 剩余 数据 的 大 小 
bytesTowWrite = totalBytes - tcpClient->write(outBlock); 


ui->clientStatusLabel->setText(tr(" 已 连接 "))) 
outBlock.resize(0); 


(5) 下 面 是 更 新 进度 条 ， 也 就 是 发 送 文件 数据 。 


// 更 新 进度 条 ， 实 现 文件 的 传送 
void Widget::updateCclientProgress(qint64 numBytes) 





// 已 经 发 送 数据 的 大 小 
byteswritten += (int)numBytes; 


if(bytesToWrite > 0) // 如 有 果 已 经 发 送 了 数据 









{ 
了 送 1oadSize 大 小 的 数据 ， 这 里 设置 为 4KB， 如 果 剩 余 的 数据 不 足 4KB， 
// 就 发 送 剩余 数据 的 大 
outBlock = JocalFile->read(qMin(bytesTowrite, 1LoadSize) )， 
// 发 送 完 一 次 数据 后 还 剩余 数据 的 大 小 
bytesTowrite -= (int)tcpClient->write(outBlock); 
// 清 空 发 送 缓冲 区 
outBlock.resize(0); 
} else { 
localFile->close(); // 如 果 没 有 发 送 任何 数据 ， 则 关闭 文件 


// 更 新 进度 条 
ui->clientProgressBar->setMaximum(totalBytes); 
ui->clientProgressBar->setValue(byteswritten); 


if(bytesWritten == totalBytes) // 发 送 完 毕 
{ 
ui->clientStatusLabel->setText(tr(" 传 送 文件 %1 成 功 ") 
.arg(fileName)); 
localFile->close(); 
tcpClient->close(); 


} 


(6) 实现 错误 处 理 函 数 。 


void Widget: :displayError(QAbstractSocket: :SocketError) / /显示 错误 


{ 
qDebug() << tcpClient->errorString(); 
tcpClient->close(); 
ui->clientProgressBar->reset(); 
ui->clientStatusLabel->setText(tr(" 客 户 端 就 绪 ")); 
ui->sendButton->setEnabled(true); 

} 


(7) 我 们 从 widget.ui 中 分 别 进行 “打开 ”按钮 和 “发 送 " 按 钮 的 单 击 事件 楷 函 数 ， 然 后 更 改 如 
下 。 
void Widget::on_openButton_clicked() // 打 开 按钮 
{ 
openFile( ); 
void Widget::on_sendButton_clicked() // 发 送 按 鱼 


send () ; 


5. 我 们 为 了 使 程序 中 的 中 文 不 显示 乱码 ， 在 main.cpp 文件 中 更 改 。 


添加 头 文件 : #include <QTextCodec> 


在 main 函数 中 添加 代码 : QTextCodec: :setCodecForTr(QTextCodec: :codecForName("UTF-8") )， 
6 ' 现在 可 以 先 运行 程序 。 
7 程序 整体 思路 分 析 。 


我 们 设计 好 界面 ， 然 后 按 下 “打开 ”按钮 ， 选 择 要 发 送 的 文件 ， 这 时 调用 了 openFile() 函数 。 
然后 点 击 " 发 送 "按钮 ， 调 用 send() 函数 ， 与 服务 器 进行 连接 。 当 连接 成 功 时 就 会 发 

出 connected () 信号 ， 这 时 就 会 执行 startTransfer() 函数 ， 进 行文 件 头 结构 的 发 送 ， 当 发 送 
成 功 时 就 会 发 出 byteswritten(qint64) 信号 ， 这 时 执 

行 updateClientProgress(qint64 numBytes) 进行 文件 数据 的 传输 和 进度 条 的 更 新 。 这 里 使 用 了 
一 个 loadsize 变量 ， 我 们 在 构造 函数 中 将 其 初始 化 为 4*1624 即 4 字 节 ， 它 的 作用 是 ， 我 们 将 
整个 大 的 文件 分 成 很 多 小 的 部 分 进行 发 送 ， 每 部 分 为 4 字 节 。 而 当 连 接 出 现 问题 时 就 会 发 

出 error(QAbstractSocket::SocketError) 信号 ， 这 时 就 会 执行 displayError() 部 数 。 对 于 程序 
中 其 他 细节 我 们 就 不 再 分 析 ， 布 望 大 家 能 自己 编程 研究 一 下 。 


巴 
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二 、 服 务 器 端 


我 们 在 服务 器 端 进行 数据 的 接收 。 服 务 器 端 程序 是 很 简单 的 ， 我 们 开始 进行 监听 ， 一 旦 发 现 
有 连接 请 求 就 发 出 newConnection() 信号 ， 然 后 我 们 便 接受 连接 ， 开始 接收 数据 。 
1 新 建 QtGui 应 用 


名 称 为 tcpReceiver ， 基 类 选择 QWidget ， 类 名 为 Widget ， 完成 后 打开 tcpReceiver.pro 添 
加 一 行 代码 : QT += network 。 


2 我 们 更 改 widget,ui 文件 ， 设 计 界 面 如 下 。 


其 中 “服务 器 端 ” Label 的 objectName 为 serverStatusLabel ; 进度 
条 ProgressBar 的 objectName 为 serverProgressBar ， 人 设置 其 value 属性 为 0 ; "开始 监听 " 按 
条 Prog 的 obj 为 ， 设 置 其 value 属性 为 0 ; “开始 监听 


钮 的 objectName 为 startButton 。 


效果 如 下 。 








服务 器 端 

| 0% 
国 大 
面 一 -者 一 | 








3 更改 widget.h 文件 的 内 容 。 
(1) 添加 头 文 件 包含 : #include <QtNetwork> 


(2) 添加 私有 变量 : 


QTcpServer tcpServer,; 

QTcpSocket *tcpServerConnection; 
qint64 totalBytes; // 存 放 总 大 小 信息 
qint64 bytesReceived; // 已 收 到 数据 的 大 小 
qint64 fileNameSize; // 文 件 名 的 大 小 信息 
QString fileName;  // 和 存放 文件 名 

QFile *localFile; // 本 地 文件 
QByteArray inBlock; // 数 据 缓冲 区 








(3) 添加 私有 槽 函数 : 


private Slots : 
VoldiommstarntButtongclacked OF 
void start();  // 开 始 监听 
void acceptConnection(); // 建 立 连 接 
void updateServerProgress(); // 更 新 进度 条 ， 接 收 数据 


// 显 示 错 误 
void displayError(QAbstractSocket::SocketError socketError); 


4 * 更改 widget.cpp 文件 。 


(1) 在 构造 函数 中 添加 代码 : 


totalBytes = 0; 
bytesReceived = 0; 
fileNameSize = 0; 
// 当 发 现 新 连接 时 发 出 newConnection( ) 信 号 
connect(&tcpServer,SIGNAL(newConnection()),this, 
SLOT(acceptCconnection( ) ) ) ; 


(2) 实现 start() 函数 。 


void Widget::start() // 开 始 监 听 


{ 
ui->startButton->setEnabled(false); 
bytesReceived =0; 
if(!tcpServer.listen(QHostAddress: :LocalHost, 6666)) 
dqDebug() << tcpServer.errorString(); 
close(); 
returm,; 
} 
ui->serverStatusLabel->setText(tr(" 监 听 "))，; 
} 


(3) 实现 接受 连接 函数 。 


void Widget::acceptConnection()  / /接受 连 ] 


{ 
tcpServerConnection = tcpServer.nextPendingConnection(); 
connect(tcpServerConnection,SIGNAL(readyRead()),this, 
SLOT(updateServerProgress())); 
connect(tcpServerConnection, 
SIGNAL(error(QAbstractSocket::SocketError)),this, 
SLOT(displayError(QAbstractSocket::SocketError))); 
ui->serverStatusLabel->setText(tr(" 接 受 连接 "))，; 
tcpServer.close(); 


(4) 实现 更 新 进度 条 函数 。 


伴 
? 


void Widget::updateServerProgress() // 更 新 3 
{ 
QDatasSsktreammnttktcpservenrconnectaon 
in,SetVersion(QDataStream: :Qt 4 6); 
ys <= ee 2) 
p 术 接收 时 A ”那么 开始 接收 数据 ， 我 们 保存 到 // 来 的 头 文 人 尽 
ne Soy esa ab le, >= sizeof(qint64)* 2 
&& (fileNameSize == 0 
{ / /+ 交 收 拓 心 大 小 信息 和 文件 小 信 心 
in >> totalBytes >> 人 
bytesReceived += sizeof(qint64) * 2; 





if((tcpServerConnection->bytesAvailable() >= fileNameSize) 
&& (fileNameSize != 0)) 

{ // 接 收文 件 名 ， 并 建立 文件 
In >> fileName; 
ui->serverStatusLabel->setText(tr(" 接 收文 件 %1 ...") 

.arg(fileName)); 

bytesReceived += fileNameSize; 
JocalFile= new QFile(fileName); 
if(!localFile->open(QFile: :Writeonly)) 


qdDebug() << "open file error!",; 
Eeeuany 
} 
} 
else return; 


UAE < toe te 

1， WY 如 下 居 小 于 总 数 j A 
bytesReceived += 本 >bytesAvailable( ); 
inBlock= tcpServerConnection->readAll(); 
localFile->write(inBlock); 
inBlock.resize(0); 





Dv 

// 更 新 进度 条 
Ui->serverProgressBar->setMaximum(totalBytes); 
Ui->serverProgressBar->setValue(bytesReceived); 


0 == totalBytes) 
{ // 接 收 数据 完成 时 
ne >close( ); 
localFile->close(); 
ui->startButton->setEnabled(true); 
ui->serverStatusLabel->setText(tr(" 接 收文 件 %1 成 功 !") 
.arg(fileName)); 


} 
} 





(5) 错误 处 理 函 数 。 


void Widget: :displayError(QAbstractSocket: :SocketError) // 和 错误 处 理 
{ 
qDebug() << tcpServerConnection->errorSstring(); 
tcpServerConnection->close(); 
Ui->serverProgressBar->reset(); 
ui->serverStatusLabel->setText(tr(" 服 务 端 就 绪 ")); 
ui->startButton->setEnabled(true); 


(6) 我 们 在 widget.ui 中 进入 “开始 监听 ”按钮 的 单 击 事件 槽 函数 ， 更 改 如 下 。 
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void Widget::on_startButton_clicked() // 开 始 监听 按钮 


start(); 


5 我 们 为 了 使 程序 中 的 中 文 不 显示 乱码 ， 在 main.cpp 文件 中 更 改 。 

添加 头 文件 包含 : #include <QTextcodec> 

在 main 函数 中 添加 代码 : QTextcodec: :setCcodecForTr(QTextCodec: :codecForName("UTF-8")); 
6 运行 程序 ， 并 同时 运行 tcpsender 程序 ， 效 果 如 下 。 


有 Widget 





接收 文件 gqt-creator-windows-opensource-2.8.0. ex 











开 娩 监听 


端 输入 主机 地 址 和 端口 号 ， 然 后 打开 要 发 





在 这 两 节 里 我 们 介绍 了 TCP 的 应 用 ， 可 以 看 到 服务 器 端 和 客户 度 端 都 可 以 当做 发 送 端 或 者 接 
收 端 ， 而 且 数 据 的 发 送 与 接收 只 要 使 用 相对 应 的 协议 即 可 ， 它 是 可 以 根据 用 户 的 需要 来 进行 
编程 的 ， 没 有 固定 的 格式 。《Qt 及 Qt Quick 开 发 实战 精 解 》 中 的 局 域 网 聊天 工具 就 是 本 节 知 
识 的 扩展 ， 大 家 可 以 从 社区 下 载 页 面 下 载 其 源码 。 


涉及 到 的 源码 : 


e tcpSender.rar 
e tcpReceiver.rar 


(LA 
i 
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导语 
在 前 面 的 几 节 内 容 中 讲解 了 Qt 网 络 编程 的 一 些 基本 内 容 ， 这 一 节 来 看 一 下 在 Qt 中 进程 和 线程 
的 基本 应 用 。 


环境 : Windows Xp + Qt 4.8.5+Qt Creator2.8.0 


一 、 进 程 


在 设计 一 个 应 用 程序 时 ， 有 时 不 希望 将 一 个 不 太 相 关 的 功能 集成 到 程序 中 ， 或 者 是 因为 该 功 
能 与 当前 设计 的 应 用 程序 联系 不 大 ， 或 者 是 因为 该 功能 已 经 可 以 使 用 现成 的 程序 很 好 的 实现 
了 ， 这 时 就 可 以 在 当前 的 应 用 程序 中 调用 外 部 的 程序 来 实现 该 功能 ， 这 就 会 使 用 到 进程 。Qt 
应 用 程序 可 以 很 容易 的 启动 一 个 外 部 应 用 程序 ， 而 且 Qt 也 提供 了 在 多 种 进程 间 通 信 的 方法 。 


Qt 的 Qprocess 类 用 来 启动 一 个 外 部 程序 并 与 其 进行 通信 。 下 面 我 们 来 看 一 下 怎么 在 Qt 代码 中 
启动 一 个 进程 。 


1 首先 创建 QtGui 应 用 。 

工程 名 称 为 myProcess ， 其 他 选项 保持 默认 即 可 。 

2 然后 设计 界面 。 

在 设计 模式 往 界 面 上 拖 入 一 个 Push Button 部 件 ， 修 改 其 显示 文本 为 “启动 一 个 进程 ”。 
3 . 修改 档 。 

在 按钮 上 点 击 鼠 标 右键 ， 转 到 其 clicked() 信号 对 应 的 楷 ， 更 改 如 下 : 


void Mainwindow: :on_pushButton_clicked() 


myProcess.start("notepad.exe"); 


4 进入 mainwindow.h 文件 添加 代码 。 

先 添加 头 文件 包含 : #include <QProcess> ， 然 后 添加 私有 对 象 定义 : Qprocess myprocess; 
5 . 运行 程序 。 

当 单 击 界面 上 的 按钮 时 就 会 弹出 一 个 记事 本 程序 。 


这 里 我 们 使 用 Qprocess 对 象 运 行 了 Windows 系 统 下 的 记事 本 程序 ( 即 notepad.exe 程序 ) ， 
因为 该 程序 在 系统 目录 中 ， 所 以 这 里 不 需要 指定 其 路 径 。 大 家 也 可 以 运行 其 他 任何 的 程序 ， 
只 需要 指定 其 具体 路 径 即 可 。 我 们 看 到 ， 可 以 使 用 start() 来 启动 一 个 程序 ， 有 时 启动 一 个 
程序 时 需要 指定 启动 参数 ， 这 种 情况 在 命令 行 启动 程 序 时 是 很 常见 的 ， 下 面 来 看 一 个 例子 ， 
还 在 前 面 的 例子 的 基础 上 进行 更 改 。 


1 在 mainwindow.h 文件 中 添加 代码 。 


添加 私有 模 : 


private Slots : 
void showResult(); 


2 .在 mainwindow.cpp 文件 中 添加 代码 。 

(1) 先 添加 头 文件 包含 : #include <QDebug> ， 然后 在 构造 函数 中 添加 如 下 代码 : 
connect(&myProcess,SIGNAL(readyRead()), this, SLOT(showResult())); 

(2) 然后 添加 showResult() 槽 的 定义 : 


void Mainwindow: :showResult() 


qDebug() << "showResult: " << endl 
<< QString(myProcess.readAll( )); 


(3) 最 后 将 前 面 按钮 的 单 击 信 号 对 应 的 柳 更 改 为 : 


void MainwWindow: :on_pushButton_clicked() 


{ 
QString program = "cmd.exe"; 
QStringList arguments ; 
arguments << "/c dir&pause"; 
myProcess,start(program，arguments ) ; 


这 里 在 启动 Windows 下 的 命令 行 提 示 符 程序 cmd.exe 时 为 其 提供 了 命令 作为 参数 ， 这 样 可 以 
直接 执行 该 命令 。 当 命令 执行 完 以 后 可 以 执行 showResult() 槽 来 显示 运行 的 结果 。 这 里 为 了 
可 以 显示 结果 中 的 中 文字 符 ， 使 用 了 QString() 进行 编码 转换 。 这 需要 在 mian() 函数 中 添加 
代码 。 


3 .为 了 确保 可 以 显示 输出 的 中 文字 符 ， 在 main.cpp 文件 中 添加 代码 。 先 添加 头 文件 包 
含 #include <QTextcodec> ， 然 后 在 main() 函数 第 一 行 代码 下 面 ， 添 加 如 下 一 行 代码 : 


QTextCodec: :setCodecForCStrings(QTextCodec: :codecForLocale()); 


4 . 运行 程序 。 
按 下 界面 上 的 按钮 ， 会 在 Qt Creator 中 的 应 用 程序 输出 栏 中 输出 命令 的 执行 结果 。 


对 于 Qt 中 进程 进一步 的 使 用 可 以 参考 Qprocess 类 的 帮助 文档 。 在 Qt 中 还 提供 了 多 种 进程 间 通 
信 的 方法 ， 大 家 可 以 在 Qt 帮助 中 查看 Inter-ProcessCommunication in Qt 关键 字 对 应 的 文档 。 


二 、 线 程 


Qt 提供 了 对 线程 的 支持 ， 这 包括 一 组 与 平台 无 关 的 线程 类 ， 一 个 线程 安全 的 发 送 事 件 的 方 
式 ， 以 及 跨 线 程 的 信号 - 模 的 关联 。 这 些 使 得 可 以 很 容易 的 开发 可 移植 的 多 线程 Qt 应 用 程序 ， 
可 以 充分 利用 多 处 理 器 的 机 器 。 多 线程 编程 也 可 以 有 效 的 解决 在 不 冻结 一 个 应 用 程序 的 用 户 
界面 的 情况 下 执行 一 个 耗 时 的 操作 的 问题 。 关 于 线程 的 内 容 ， 大 家 可 以 在 Qt 帮助 中 参考 
Thread Support in Qt 关键 字 。 


(一 ) 启动 一 个 线程 


Qt 中 的 QThread 类 提供 了 平台 无 关 的 线程 。 一 个 QThread 代表 了 一 个 在 应 用 程序 中 可 以 独立 
控制 的 线程 ， 它 与 进程 中 的 其 他 线程 分 享 数据 ， 但 是 是 独立 执行 的 。 相 对 于 一 般 的 程序 都 是 
从 main() 范 数 开始 执行 ，QThread 从 run() 苑 数 开始 执行 。 默 认 的 ，run() 通过 调 

用 exec() 来 开启 事件 循环 。 要 创建 一 个 线程 ， 需 要 子 类 化 QThread 并 且 重 新 实现 run() 遂 
数 。 


每 一 个 线程 可 以 有 自己 的 事件 循环 ， 可 以 通过 调用 exec() 函数 来 启动 事件 循环 ， 可 以 通过 调 
用 exit() 或 者 quit() 来 停止 事件 循环 。 在 一 个 线程 中 拥有 一 个 事件 循环 ， 可 以 使 它 能 够 关 
联 其 他 线程 中 的 信号 到 本 线程 的 模 上 ， 这 使 用 了 队列 关联 机 制 ， 就 是 在 使 用 connect() 函数 
进行 言 号 和 楼 的 关联 时 ， 将 Qt::ConnectionType 类 型 的 参数 指 定 为 Qt::QueuedConnection ° 拥 
有 事件 循环 还 可 以 使 该 线程 能 过 使 用 需要 事件 循环 的 类 ， 比 如 QTimer 和 QTcpSocket 类 等 。 
注意 ， 在 线程 中 是 无 法 使 用 任何 的 部 件 类 的 。 


下 面 来 看 一 个 在 图 形 界面 程序 中 局 动 一 个 线程 的 例子 ， 在 界面 上 有 两 个 按钮 ， 一 个 用 于 开局 
一 个 线程 ， 一 个 用 于 关闭 该 线程 。 


1 。 创建 项 目 o 
新 建 Qt Gui 应 用 ， 名 称 为 myThread ， 类 名 为 Dialog ， 基 类 选择 Qpialog 。 


2 设计 界面 。 


完成 项 目 创建 后 进入 设计 模式 ， 向 界面 中 放 入 两 个 Push Button 按钮 ， 将 第 一 个 按钮 的 显示 文 
本 更 改 为 “启动 线程 "， 将 其 objectName 属性 更 改 为 startButton ; 将 第 二 个 按钮 的 显示 文本 更 
改 为 “终止 线程 "， 将 其 opjectName 属性 更 改 为 stopButton ， 将 其 enabled 属性 取消 选中 。 


3 . 添加 自 定 义 线程 类 。 


向 项 目 中 添加 新 的 C++ 类 ， 类 名 设置 为 MyThread ， 基 类 设置 为 QThread ， 类 型 信息 选择 “继承 
自 QObject”。 完 成 后 进入 mythread.h 文件 ， 先 添加 一 个 公有 元 数 声明 : 


void stop(); 


然后 再 添加 一 个 函数 声明 和 一 个 变量 的 定义 : 


protected: 
vo mG; 
private: 
volatile bool stopped ; 


这 里 stopped 变量 使 用 了 volatile 关键 字 ， 这 样 可 以 使 它 在 任何 时 候 都 保持 最 新 的 值 ， 从 而 
可 以 避免 在 多 个 线程 中 访问 它 时 出 错 。 然 后 进入 mythread.cpp 文件 中 ， 先 添加 头 文 
件 #include <QDbebug> ， 然 后 在 构造 函数 中 添加 如 下 代码 : 


stopped = false; 


这 里 将 stopped 变量 初始 化 为 false 。 下 面 添加 run() 函数 的 定义 : 


void MyThread: :run() 


{ 
qreal i = 0; 
while (!stopped) 
qDebug() << QString("in MyThread: %1").arg(i++); 
stopped = false; 
} 


这 里 一 直 判 断 stopped 变量 的 值 ， 只 要 它 为 false ， 那么 就 一 直 打 印字 符 串 。 下 面 添 
加 stop() 函数 的 定义 : 


void MyThread: :stop() 
{ 


stopped = true; 


在 stop() 函数 中 将 stopped 变量 设置 为 了 true ， 这 样 便 可 以 结束 run() 函数 中 的 循环 ， 从 
而 从 run() 苑 数 中 退出 ， 这 样 整 个 线程 也 就 结束 了 。 这 里 使 用 了 stopped 变量 来 实现 了 进程 
的 终止 ， 并 没有 使 用 危险 的 terminate( ) 函数 。 


4 在 Dialog 类 中 使 用 自 定 义 的 线程 。 


先 到 dialog.h 文件 中 ， 添 加 头 文 件 包含 


#include "mythread.h" 


后 添加 私有 对 象 的 定义 : 


MyThread thread ; 


分 别 


下 面 到 设计 模式 ， 进入 两 个 按钮 的 单 击 信 号 对 应 的 档 ， 


// 启动 线程 按钮 
void Dialog::on_startButton_clicked() 


thread. start(); 
ui->startButton->setEnabled(false); 
ui->stopButton->setEnabled(true); 


} 


// 终止 线程 按钮 
void Dialog::on_stopButton_clicked() 





if (thread.isRunning()) { 
thread. stop(); 
ui->startButton->setEnabled(true); 
ui->stopButton->setEnabled(false); 


在 启动 线程 时 调用 了 start() 函数 ， 然 后 


后 设置 了 


用 isRunning() 来 判断 线程 是 否 在 运行 ， 如 果 是 ， 则 调用 stop() 
动 线程 "按钮 ， 查 看 应 用 程序 输出 栏 的 输出 ， 然 后 再 


两 个 按钮 的 状态 。 现 在 运行 程序 ， 按 下 “局 
按 下 "终止 线程 "按钮 ， 可 以 看 到 已 经 停止 输出 了 。 


下 面 我 们 接着 来 优化 这 个 程序 ， 通 过 


1 在 mythread.h 文件 中 添加 信号 的 定义 : 


signals: 
void, stringChanged(const QString &); 


2 然后 到 mythread.cpp 文件 中 更 改 run() 函数 的 定义 : 


void MyThread: 
{ 


:run() 


long int i = 0; 
while (!stopped) { 


QString str = QString("in MyThread: %1").arg(i); 


emit stringChanged(str), 
msleep(1000); 
i++， 

} 


stopped = false; 


言 号 和 模 来 将 子 线程 中 的 字符 串 显 示 到 主 


更 改 如 下 : 


两 个 按钮 的 状态 。 在 终止 线程 时 ， 先 使 


汐 数 来 终止 线程 ， 并 且 更 改 


界面 上 。 


这 里 每 隔 1 秒 就 发 射 一 次 信号 ， 里 面包 含 了 生成 的 字符 串 。 
3 .到 dialog.h 文件 中 添加 槽 声明 : 


private Slots : 
void changeString(const QString &); 


4 打开 dialog.ui ， 然 后 向 主 界 面 上 拖 入 一 个 Label 标签 部 件 。 


5 .到 dialog.cpp 文件 中 ， 在 构造 函数 里 面 添加 信号 和 槽 的 关联 : 


// 关联 线程 中 的 信号 和 本 类 中 的 模 
connect(&thread, SIGNAL(stringChanged(QString)), 
this, SLOT(changestring(QString))); 


6 . 然后 添加 槽 的 定义 : 


void Dialog::changeString(const QString &str) 


ui->label->setText(str); 


这 里 就 是 将 子 线程 发 送 过 来 的 字符 串 显 示 到 主 界面 上 。 现 在 可 以 运行 程序 ， 查 看 效果 了 。 


Qt 中 的 QMutex 、 QReadwriteLock 、 QSemaphore 和 QWaitCondition 类 提供 了 同步 线程 的 方 
法 。 虽 然 使 用 线程 的 思想 是 多 个 线程 可 以 尽 可 能 的 并 发 执行 ， 但 是 总 有 一 些 时 刻 ， 一 些 线程 
必须 停止 来 等 待 其 他 线程 。 例 如 ， 如 果 两 个 线程 党 试 同时 访问 相同 的 全 局 变量 ， 结 果 通常 是 
不 确定 的 ° QMutex 提供 了 一 个 互 斤 锁 ( mutex ) ， QReadwriteLock 即 读 - 写 


锁 ; QSemaphore 即 信 号 量 ， QWaitCondition 即 条 件 变量 
(三 ) 可 重 入 与 线程 安全 


在 查看 Qt 的 帮助 文档 时 ， 在 很 多 类 的 开始 都 写 着 “All functions in this class are reentrant"， 或 
者 “Al functions in this class are thread-safe”。 在 Qt 文档 中 ， 术 语 “ 可 重 入 (reentrant) "和"“ 线 
程 安全 (thread-safe ) “用 来 标记 类 和 函数 ， 来 表明 怎样 在 多 线程 应 用 程序 中 使 用 它们 : 


一 个 线程 安全 的 函数 可 以 同时 被 多 个 线程 调用 ， 即 便 是 这 些 调用 使 用 了 共享 数据 。 因 为 该 共 
享 数据 的 所 有 实例 都 被 序列 化 了 。 


一 个 可 重 入 的 函数 也 可 以 同时 被 多 个 线程 调用 ， 但 是 只 能 是 在 每 个 调用 使 用 自己 的 数据 时 。 


最 后 要 注意 的 是 ， 使 用 线程 是 很 容易 出 现 问题 的 ， 比 如 无 法 在 主线 程 以 外 的 线程 中 使 用 GUI 类 
的 问题 (可 以 简单 的 通过 这 样 的 方式 来 解决 : 将 一 些 非 常 耗 时 的 操作 放 在 一 个 单独 的 工作 线 
程 中 来 进行 ， 等 该 工作 线程 完成 后 将 结果 返回 给 主线 程 ， 最 后 由 主线 程 将 结果 显示 到 屏幕 
上 ) 。 大 家 应 该 说 懂 的 使 用 线程 。 


涉及 到 的 源码 下 载 
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导语 


WebKit 是 一 个 开源 的 浏览 器 引擎 。Qt 中 提供 了 基于 WebKit 的 QtWebKit 模 块 ， 它 包含 了 一 组 相 
关 的 类 。QtWebKit 提 供 了 一 个 Web 浏 览 器 引擎 ， 使 用 它 便 可 以 很 容易 的 将 万 维 网 

《WorldWide Web) 中 的 内 容 虞 入 到 Qt 应 用 程序 中 。 与 此 同时 ， 本 地 也 可 以 对 Web 内 容 进行 
控制 。QtWebKit 可 以 呈现 HTML (HyperTextMarkup Language， 超 文本 标记 语言 ) 文档 、 
XHTML (Extensible HyperTextMarkup Language， 可 扩展 超 文 本 标记 语言 ) 文档 和 
SVG (Scalable VectorGraphics， 可 缩放 矢量 图 形 ) 文档 ， 风 格 使 用 CSS (Cascading 
StyleSheets， 层 司 样 式 表 ) ， 脚 本 使 用 JavaScript。 在 JavaScript 执 行 环 境 和 Qt 对 象 模型 间 搭 
建 的 桥梁 ， 实 现 了 使 用 WebKit 的 JavaScript 环 境 访问 本 地 对 象 。 关 于 这 一 点 ， 大 家 可 以 在 帮助 
中 参考 The QtWebKit Bridge 关 键 字 对 应 的 文档 。 通 过 整合 Qt 的 网 络 模块 ， 实 现 了 从 Web 服 务 
器 、 本 地 文件 系统 甚至 Qt 资源 系统 中 透明 的 加 载 Web 页 面 。 


环境 : Windows Xp + Qt 4.8.5+Qt Creator2.8.0 


目 系 


。 一 、 简 单 应 用 
。 二 、 扩 展 应 用 


Ee 
一 、 简 单 应 用 


下 面 我 们 来 实现 一 个 可 以 打开 特定 网 页 的 程序 。 新 建 空 的 Qt 项 目 ， 在 pro 项 目 文件 中 添加 一 
行 代码 : QT += webkit ， 然后 向 项 目 中 添加 一 个 main.cpp 文件 ， 并 在 其 中 添加 如 下 代码 : 


#include <QWebView> 

#include <QApplication> 

nt mann(nt arger cnar avgyv pl) 

{ 
QApplication a(argc, argv); 
QWebView view; 
view.load(QUrl("http://www.qter.org")); 
view. show( ); 
return a.exec(); 


要 使 用 WebKit， 就 要 先 添 加 webkit 模块 。 Qwebview 是 Qtwebkit 模块 主要 的 窗 体 部 件 ， 它 可 
以 在 各 种 应 用 程序 中 用 来 显示 Internet 上 的 网 页 内 容 。 Qwebview 作为 一 个 窗口 部 件 ， 可 以 左 入 
到 窗 体 或 者 图 形 视图 部 件 中 。 


QWebView 用 来 显示 Web 页 面 ， 每 个 QWebView 实例 都 包含 一 个 QwebPage 对 象 ° QwebPage 提 
供 了 对 一 个 页 面 的 文档 结构 的 访问 ， 描 述 了 如 框架 (frame) 、 访 问 历史 记录 和 可 编辑 内 容 的 
撤销 / 重 做 栈 等 特色 。 每 一 个 aowebPage 都 包含 一 个 QwebFrame 对 象 作为 它 的 主 框架 。 在 HTML 
中 的 每 一 个 单独 的 框架 都 可 以 使 用 QwebFrame 来 表示 ， 这 个 类 包含 了 到 JavaScript 窗 口 对 象 的 
桥梁 ， 而 且 可 以 进行 绘制 。 在 QWebPage 的 主 框架 中 可 以 包含 很 多 的 子 框架 。 


HTML 文 档 中 单独 的 元 素 可 以 通过 DOM JavaScript 接 口 进行 访问 ， 在 Qtwebkit 中 与 这 个 接口 
等 价 的 接口 由 QWebElement 来 表示 ° QWebElement 对 得 可 以 使 用 QWebFram e@ 

的 findAllElement() 和 findFirstElement() 函数 来 获取 。 一 般 的 网 页 浏览 器 的 特色 设置 都 可 
以 通过 Qwebsettings 类 来 配置 ， 可 以 通过 默认 设置 为 所 有 的 QqwebpPage 实例 提供 默认 值 。 单 独 
的 属性 可 以 使 用 页 面 指定 的 设置 对 象 进行 重 写 。 

二 、 扩 展 应 用 

下 面 再 来 看 一 个 可 以 随意 更 改 网 址 并 且 可 以 显示 网 站 logo 的 例子 。 新 建 Qt Gui 应 用 ， 项 目 名 称 
为 webview ， 类 名 和 基 类 保持 Mainwindow 和 QMainwindow 不 变 。 完 成 后 向 webview.pro 文件 
中 添加 QT += webkit 一 行 代码 ， 并 按 下 ctrl + Ss 保存 该 文件 。 


1 .下 面 到 mainwindow.h 文件 中 ， 先 添加 头 文件 : 


#include <QWebView> 
#include <QLineEdit> 


然后 添加 模 的 声明 : 


protected slots: 





void changeLocation(); MY 
void setProgress(int); YA 
vord adjustTitle(),; UN 7 
void finishLoading(bool); // 加 载 完 成 后 进行 处 理 
再 添加 对 象 和 变量 定义 : 


QWebView *view; 
QLineEdit *locationEdit; 
Int progress ; 


2 .下 面 到 mainwindow.cpp 文件 中 ， 在 构造 函数 中 添加 如 下 代码 : 


progress = 0) 

View = new QWebView( this); 
setCcentralWwidget (view); 
resize(800, 600)，; 

// 关联 信号 和 模 
connect(view, SIGNAL(loadProgress(int)), this, SLOT(setProgress(int))); 
connect(view, SIGNAL(titleChanged(QString)), this, SLOoOT(adjustTitle())); 
connect(view, SIGNAL(loadFinished(bool)), this, SLOT(finishLoading(bool))); 
locationEdit = new QLineEdit(this); 

connect(locationEdit, SIGNAL(returnpPressed()), this, SLOT(changeLocation())); 
// 向 工具 栏 添加 动作 和 部 件 
ui->mainToolBar->addAction(view->pageAction(QWebPage: :Back)); 
ui->mainToolBar->addAction(view->pageAction(QWebPage: :Forward)); 
ui->mainToolBar->addAction(view->pageAction(QWebPage: :Reload)); 
ui->mainToolBar->addAction(view->pageAction(QWebPage: :Stop)); 
ui->mainToolBar->addwidget(locationEdit); 


// 设置 并 加 载 初始 网 页 地 址 


locationEdit->setText("http://www.baidu.com"); 
view->load(QUr1i("http://www.baidu.com")); 


当 Qwebview 开始 加 载 时 ， 会 发 射 loadSstarted() 信号 ; 而 每 当 一 个 网 页 元 素 (例如 一 张 图 片 
或 一 个 脚本 等 ) 加 载 完 成 时 ， 都 会 发 射 loadProgress() 信号 ; 最 后 2 当 加 载 全 部 完成 后 ， 会 
发 射 loadFinished() 信号 ， 如 果 加 载 成 功 ， 该 函数 的 参数 为 true ， 否 则 为 false 。 可 以 使 
用 title() 来 获取 HTML 文 档 的 标题 ， 如 果 标 题 发 生 了 改变 ， 将 会 发 射 titlechanged() 信 


号 


ES 


3 .下 面 添加 那 几 个 槽 的 定义 : 


void Mainwindow: :changeLocation( ) 
QUrl url = QUrl(locationEdit->text()); 
view->load(ur1); 
view->setFocus(); 


void MainwWindow: :setProgress(int p) 


{ 
progress = p; 
adjustTitle( ); 
void Mainwindow: :adjustTitle() 
{ 
if ( progress <= 0 || progress >= 100) { 
setWindowTitle(view->title()); 
} else { 
setwindowTitle(QString("%1 (%2%)").arg(view->title()).arg(progress)); 
} 


void Mainwindow: :finishLoading(bool finished) 


if (finished) { 
progress = 100， 
setwWindowTitle(view->title()); 
} else { 
setwindowTitle("web page loading error!"); 
} 


下 面 运行 程序 ， 效 果 如 下 图 所 示 : 
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: @ © 筷 @ http:/ /www. qter. or 名 


Qter 


开源 :共享 , 自 出 





Ate /rash 
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结合 


WebKit 是 一 个 很 庞大 的 体系 ， 我 们 这 里 只 是 讲解 了 其 最 基本 的 应 用 ， 有 兴趣 的 朋友 可 以 结合 
Qt 文档 来 进一步 的 学 习 。 
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第 43 篇 进 阶 (三 ) 对 象 树 与 拥有 权 
导语 


学 习 完 前 面 的 内 容 ， 大 家 对 应 用 Qt 编程 应 该 已 经 有 了 一 个 大 概 的 印象 。 后 面 的 内 容 我 们 将 介 
绍 Qt 中 的 一 些 核心 机 制 ， 它 们 是 构成 Qt 的 基础 ， 包 括 对 象 模型 、 信 号 和 槽 、 对 象 树 与 拥有 权 
等 。 在 前 面 使 用 Qt 编程 时 ， 大 家 对 一 些 内 容 可 能 存在 疑惑 ， 学 习 完 下 面 的 知识 ， 可 以 帮助 大 
家 更 好 的 使 用 Qt 进行 编程 。 


环境 : Windows Xp + Qt 4.8.5+QtCreator2.8.0 


目录 


。 一 、 对 象 模 型 
。 二、 元 对 象 系统 
e 三 、 对 象 树 与 拥有 权 


正式 
一 、 对 象 模型 


标准 C++ 对 象 模 型 可 以 在 运行 时 非常 有 效 的 支持 对 象 范式 (object paradigm ) ， 但 
态 特 性 在 一 些 问题 领域 中 不 够 灵活 。 图 形 用 户 界 面 编 程 不 仅 需要 运行 时 的 高 效 性 ， 还 需要 高 
度 的 灵活 性 。 为 此 ，Qt 在 标准 C++ 对 象 模 型 的 基础 上 添加 了 一 些 特性 ， 形 成 了 自己 的 对 得 
型 。 这 些 特性 有 : 


。 一 个 强大 的 无 颖 对 象 通信 机 制 一 一 信号 和 模 (signals and slots) 

。 可 查询 和 可 设计 的 对 象 属性 系统 (object properties ) 

。 ea 滤器 (events and event filters) 

。 通过 上 下 文 进行 国际 化 的 字符 串 翻 译 机 制 (string translation for internationalization ) 

e 0 (timers) 驱动 ， 使 得 可 以 在 一 个 事件 驱动 的 GUI 中 处 理 多 个 任务 ; 

e 分 层 结构 的 、 可 查询 的 对 象 树 (object trees) ， 它 使 用 一 种 很 自然 的 方式 来 组 织 对 象 拥 
有 权 (object ownership ) 

e。 守卫 指针 即 QPointer ， 它 在 引用 对 象 被 销毁 时 自动 将 其 设置 为 0 ; 

e 动态 的 对 象 转 换 机 制 (dynamic cast) 


高 
模 





Qt 的 这 些 特 性 都 是 在 遵循 标准 C++ 规范 内 实现 的 ， 使 用 这 些 特性 都 必须 要 继承 
自 Qobject 类 。 其 中 对 象 通信 机 制 和 动态 属性 系统 ， 还 需要 元 对 象 系统 (Meta- 
ObjectSystem) 的 支持 。 关 于 对 象 模型 的 介绍 ， 大 家 可 以 在 帮助 中 查看 Dbject Model 关 键 


字 。 
二 、 元 对 象 系统 


Qt 中 的 元 对 象 系统 (Meta-Object System) 提供 了 对 象 间 通信 的 信号 和 槽 机制、 运行 时 类 型 
信息 和 动态 属性 系统 。 元 对 象 系统 是 基于 以 下 三 个 条 件 的 : 


e 该 类 必须 继承 自 Qobject 类 ; 

e 必须 在 类 的 私有 声明 区 声明 @ 0BJECT 宏 (在 类 定义 时 ， 如 果 没 有 指定 public 或 
者 private ， 则 默认 为 private) ; 

e 元 对 象 编译 器 Meta-Object Compiler (moc) ， 为 Qobject 的 子 类 实现 元 对 象 特性 提供 必 
要 的 代码 。 


其 中 moc 工 具 读 取 一 个 C++ 源 文件 ， 如 果 它 发 现 一 个 或 者 多 个 类 的 声明 中 包含 

有 Q_oBJECT 宏 ， 便 会 另外 创建 一 个 C++ 源 文 件 (就 是 在 项 目 目录 中 的 debug 目录 下 看 到 的 以 
moc 开 头 的 C++ 源 文件 ) ， 其 中 包含 了 为 每 一 个 类 生成 的 元 对 象 代码 。 这 些 产生 的 源 文件 或 者 
被 包含 进 类 的 源 文 件 中 ， 或 者 和 类 的 实现 同时 进行 编译 和 链接 。 


元 对 象 系统 主要 是 为 了 实现 信号 和 槽 机 制 才 被 引入 的 ， 不 过 除了 信号 和 模 机 制 以 外 ， 元 对 象 
系统 还 提供 了 其 他 一 些 特 性 : 


® QObject::metaobject() 函数 可 以 返回 一 个 类 的 元 对 象 ， 它 是 QMetaObject 类 的 对 象 ; 
© QMetaobject::className() 可 以 在 运行 时 以 字符 串 形 式 返回 类 名 ， 而 不 需要 C++ 编辑 器 原 
生 的 运行 时 类 型 信息 (RTTI) 的 支持 ; 
。 Qobject::inherits() 函数 返回 一 个 对 象 是 否 是 Qobject 继承 树 上 一 个 类 的 实例 的 信息 ; 
e。 Qobject::tr() 和 Qobject::trutf8() 进行 字符 串 翻 译 来 实现 国际 化 ; 
e Qobject::setproperty() 和 Qobject::property() 通过 名 字 来 动态 设置 或 者 获取 对 象 属 
性 ; 
©  QMetao0bject::newInstance( ) 构造 该 类 的 一 个 新 实例 。 
除了 这 些 特性 外 ， 还 可 以 使 用 qobject_cast() 函数 来 对 Qobject 类 进行 动态 类 型 转换 ， 这 个 
函数 的 功能 类 似 于 标准 C++ 中 的 dynamic_cast() 函数 ， 但 它 不 再 需要 RTTI 的 支持 。 这 个 函数 
尝试 将 它 的 参数 转换 为 尖 括 号 中 的 类 型 的 指针 ， 如 果 是 正确 的 类 型 则 返回 一 个 非 零 的 指针 ， 
如 果 类 型 不 兼容 则 返回 0。 例 如 : 


QObject *obj = new Mywidget; 
QWidget *widget = qobject_cast<QWidget *>(obj); 


言 号 和 槽 机 制 是 Qt 的 核心 内 容 ， 而 信号 和 槽 机 制 必须 依 赖 于 元 对 象 系统 ， 所 以 它 是 Qt 中 很 关 
键 的 内 容 。 关 于 元 对 象 系统 的 知识 ， 可 以 在 Qt 中 查看 The Meta-Object System 关键 字 。 


三 、 对 象 树 与 拥有 权 


Qt 中 使 用 对 象 树 (object tree ) 来 组 织 和 管理 所 有 的 Qobject 类 及 其 子 类 的 对 象 。 当 创建 一 
个 Qobject 时 ， 如 果 使 用 了 其 他 的 对 象 作为 其 父 对 象 (parent) ， 那 么 这 个 Qobject 就 会 被 添 
加 到 父 对 象 的 children() 列表 中 ， 这 样 当 父 对 象 被 销毁 时 ， 这 个 gobject 也 会 被 销毁 。 实 践 
表明 ， 这 个 机 制 非常 适合 于 管理 GUI 对 象 。 例 如 ， 一 个 Qshortcut (键盘 快捷 键 ) 对 象 是 相应 
窗口 的 一 个 子 对 象 ， 所 以 当 用 户 关 闭 了 这 个 窗口 时 ， 这 个 快捷 键 也 可 以 被 销毁 。 

Qwidget 作为 能 够 在 屏幕 上 显示 的 所 有 部 件 的 基 类 ， 扩 展 了 对 象 间 的 父子 关系 。 一 个 子 对 象 
一 般 也 就 是 一 个 子 部 件 ， 因 为 它们 要 显示 在 父 部 件 的 区 域 之 中 。 例 如 ， 当 关闭 一 个 消息 对 话 
框 (message box) 后 要 销毁 它 时 ， 消 息 对 话 框 中 的 按钮 和 标签 也 会 被 销 贷 ， 这 也 正 是 我 们 
所 希望 的 ， 因 为 按钮 和 标签 是 消息 对 话 框 的 子 部 件 。 当 然 ， 我 们 也 可 以 自己 来 销毁 一 个 子 对 
象 。 关 于 这 一 部 分 的 内 容 ， 大 家 可 以 在 帮助 索引 中 查看 Object Trees &Ownership 关 键 字 。 

在 前 面 的 Qt 编程 中 我 们 应 该 看 到 过 很 多 使 用 new 来 创建 一 个 部 件 ， 但 是 却 没 有 使 用 delete 来 
进行 释放 的 问题 。 这 里 再 来 研究 一 下 这 个 问题 。 

新 建 Qt Gui 应 用 ， 项 目 名 称 为 myownership ， 基 类 选择 aowidget ， 然 后 类 名 保持 widget 不 

变 。 完 成 后 向 项 目 中 添加 新 文件 ， 模 板 选择 C++ Class， 类 名 为 MyButton ， 基 类 

为 QPushButton ， 类 型 信息 选择 “继承 自 QWidget ”o 添加 完 文件 后 在 mybutton.h 文件 中 添加 析 
构 函 数 的 声明 : 


~MyButton( ); 


然后 到 mybutton.cpp 文件 中 添加 头 文件 #include <QDebug> 并 定义 析 构 函数 : 


MyButton: :~MyButton() 


qDebug() << "delete button"; 


这 样 当 MyButton 的 对 象 被 销毁 时 ， 就 会 输出 相应 的 信息 。 这 里 定义 析 构 函数 ， 只 是 为 了 更 清 
楚 的 看 到 部 件 的 销毁 过 程 ， 其 实 一 般 在 构建 新 类 时 不 需要 实现 析 构 函数 。 下 面 
在 widget.cpp 文件 中 进行 更 改 ， 添 加 头 文件 : 


#include "mybutton.h" 
#include<QDebug> 


在 构造 函数 中 添加 代码 : 


MyButton *button = new MyButton(this); // 创建 按钮 部 件 ， 指 定 widget 为 父 部 件 
button->setText(tr("button")); 


更 改 析 构 函数 : 


Widget::~widget() 


delete ui; 
qDebug() << "delete widget",; 


widget 类 的 析 构 函数 中 默认 的 已 经 有 了 销 角 ui 的 语句 ， 这 里 又 添加 了 输出 语句 。 
当 widget 窗口 被 销 角 时 ， 将 输出 信息 。 下 面 运行 程序 ， 然 后 关闭 窗口 ， 在 QtCreator 的 应 用 


delete widget 
delete button 


可 以 看 到 ， 当 关闭 窗口 后 ， 因 为 该 窗口 是 顶层 窗口 ， 所 以 应 用 程序 要 销毁 该 窗口 部 件 (如 果 
不 是 顶层 窗口 ， 那 么 关闭 时 只 是 隐藏 ， 不 会 被 销毁 ) ， 而 当 窗 口 部 件 销毁 时 会 自动 销毁 其 子 
部 件 。 这 也 就 是 为 什么 在 Qt 中 经 常 只 看 到 new 操作 而 看 不 到 delete 操作 的 原因 。 再 来 看 一 
下 main.cpp 文件 ， 其 中 Widget 对 象 是 建立 在 栈 上 的 : 


Widget w; 
w.Show( ) 


这 样 对 于 对 象 W， 在 关闭 程序 时 会 被 自动 销毁 。 而 对 于 widget 中 的 部 件 ， 如 果 是 在 堆 上 创建 
(使 用 new 操作 符 ) ， 那么 只 要 指定 Widget 为 其 父 窗 口 就 可 以 了 ， 也 不 需要 进行 delete 操 
作 。 整 个 应 用 程序 关闭 时 ， 会 去 销毁 w 对 象 ， 而 此 时 又 会 自动 销毁 它 的 所 有 子 部 件 ， 这 些 都 
是 "Qt 的 对 象 树 所 完成 的 。 


所 以 ， 对 于 规范 的 Qt 程序 ， 我 们 要 在 main() 函数 中 将 主 窗 口 部 件 创 建 在 栈 上 ， 例 

如 Widget w; ， 而 不 要 在 堆 上 进行 创建 (使 用 new 操作 符 ) 有 对 于 其 他 窗口 部 件 ， 可 以 使 

用 new 操作 符 在 堆 上 进行 创建 ， 不 过 一 定 要 指定 其 父 部 件 ， 这 样 就 不 需要 再 使 用 delete 操作 
符 来 销毁 该 对 象 了 。 


还 有 一 种 重 定义 父 部 件 (reparented) 的 情况 ， 例 如 ， 将 一 个 包含 其 他 部 件 的 布局 管理 器 应 用 
到 窗口 上 ， 那 么 该 布局 管理 器 和 其 中 的 所 有 部 件 都 会 自动 将 它们 的 父 部 件 转换 为 该 窗口 部 
件 。 在 widget.cpp 文件 中 添加 头 文件 #include <QHBoxLayout> ， 然后 在 构造 函数 中 继续 添加 
代码 : 


MyButton *button2 = new MyButton; 

MyButton *button3 = new MyButton; 

QHBoxLayout *layout = new QHBoxLayout; 
layout->addwidget(button2); 
layout->addwidget(button3); 

setLayout (layout); // 在 该 窗口 中 使 用 布局 管理 器 


这 里 创建 了 两 个 MyButton 和 一 个 水 平 布局 管理 器 ， 但 是 并 没有 指定 它们 的 父 部 件 ， 现 在 各 个 
部 件 的 拥有 权 (ownership) 不 是 很 清楚 。 但 是 当 使 用 布局 管理 器 来 管理 这 两 个 按钮 ， 并 且 在 
窗口 中 使 用 这 个 布局 管理 器 后 ， 这 两 个 按钮 和 水 平 布局 管理 器 都 将 重 定义 父 部 件 而 成 为 窗 


口 Widget 的 子 部 件 。 可 以 使 用 children() 函数 来 获取 一 个 部 件 的 所 有 子 部 件 的 列表 ， 例 如 
在 构造 函数 中 再 添加 如 下 代码 : 


qDebug() << children(); // 输出 所 有 子 部 件 的 列表 


这 时 大 家 可 以 运行 一 下 程序 ， 查 看 应 用 程序 输出 栏 中 的 信息 ， 然 后 根据 自己 的 想法 更 改 一 下 
程序 ， 来 进一步 体会 Qt 中 对 象 树 的 概念 。 


Qt 中 的 对 象 树 很 好 地 解决 了 父子 部 件 的 关系 ， 对 于 Gui 编 程 是 十 分 方便 的 ， 在 创建 部 件 时 我 们 
只 需要 关注 它 的 父 部 件 ， 这 样 就 不 用 再 考虑 其 销毁 问题 了 。 下 一 节 ， 我 们 将 讲解 Qt 中 的 信和 号 
和 槽 的 内 容 。 


涉及 到 的 源码 


第 44 篇 进 阶 (四 ) 信号 和 模 


导语 


在 前 面 的 内 容 中 已 经 多 次 用 到 过 信号 和 楷 了 ， 这 一 节 我 们 将 详细 讲解 信号 和 槽 的 机 制 和 使 用 
方式 。 大 家 可 以 在 帮助 中 查看 Signals& Slots 关 键 字 。 


环境 : Windows Xp + Qt 4.8.5+QtCreator2.8.0 
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正文 
一 、 信 号 和 槽 机 制 


信号 和 楼 用 于 两 个 对 象 之 间 的 通信 ， 信 号 和 槽 机 制 是 Qt 的 核心 特征 ， 也 是 Qt 不 同 于 其 他 开发 
框架 的 最 突出 的 特征 。 在 GUI 编程 中 ， 当 改变 了 一 个 部 件 时 ， 总 布 望 其 他 部 件 也 能 了 解 到 该 变 
化 。 更 一 般 来 说 ， 我 们 希望 任何 对 象 都 可 以 和 其 他 对 象 进行 通信 。 例 如 ， 如 果 用 户 点 击 了 关 
闭 按钮 ， 我 们 希望 可 以 执行 窗口 的 close() 函数 来 关闭 窗口 。 为 了 实现 对 象 间 的 通信 ， 一 些 
工具 包 中 使 用 了 回调 (callback) 机 制 ， 而 在 Qt 中 ， 使 用 了 信号 和 檀 来 进行 对 象 间 的 通信 。 当 
一 个 特殊 的 事情 发 生 时 便 可 以 发 射 一 个 信号 ， 比 如 按钮 被 单 击 ; 而 槽 就 是 一 个 函数 ， 它 在 信 
号 发 射 后 被 调用 ， 来 响应 这 个 信号 。 在 Qt 的 部 件 类 中 已 经 定义 了 一 些 信号 和 楼 ， 但 是 更 多 的 
做 法 是 子 类 化 这 个 部 件 ， 然 后 添加 自己 的 信号 和 楼 来 实现 想 要 的 功能 。 
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在 前 面 使 用 过 的 信号 和 楷 的 关联 ， 都 是 一 个 信号 对 应 一 个 档 。 其 实 ， 一 个 信号 可 以 关联 到 多 
个 楷 上 ， 多 个 信号 也 可 以 关联 到 同一 个 档 上 ， 甚 至 ， 一 个 信号 还 可 以 关联 到 另 一 个 信号 上 ， 
如 下 图 所 示 。 如 果 存 在 多 个 楼 与 菜 个 信号 相关 联 ， 那 么 ， 当 这 个 信号 被 发 射 时 ， 这 些 槽 将 会 
一 个 接 一 个 地 执行 ， 但 是 它们 执行 的 顺序 是 随机 的 ， 无 法 指定 它们 的 执行 顺序 。 





connect( Object1, signal1, Object2, slot1 ) 
connect( Object1, signal1, Object2, slot2 ) 






connect( Object1, signal2, Object4, slot1 ) 





connect( Object3, signal1, Object4, slot3 ) 


下 面 通过 一 个 简单 的 例子 来 进一步 讲解 信号 和 槽 的 相关 知识 。 这 个 例子 实现 的 效果 是 : 在 主 
界面 中 创建 一 个 对 话 框 ， 在 这 个 对 话 框 中 可 以 输入 数值 ， 当 按 下 确定 按钮 时 关闭 对 话 框 并 且 
将 输入 的 数值 通过 信号 发 射出 去 ， 而 在 主 界 面 中 接收 该 信号 并 且 显 示 数 值 。 


新 建 Qt Gui 应 用 ， 项 目 名 称 为 mysignalslot ， 基 类 选择 Qwidget ， 然 后 类 名 保持 widget 不 
变 。 项 目 建立 完成 后 ， 向 项 目 中 添加 新 文件 ， 模 板 选择 Qt 分 类 中 的 “Qt 设计 师 界 面 类 ”， 界面 模 
板 选择 Dialog without Buttons ， 类 名 为 MyDialog ° 完成 后 首先 在 mydialog.h 文件 中 添加 代 
码 来 声明 一 个 信号 : 


Signals : 
void dlgReturn(int); // 自 定义 的 信和 号 


声明 一 个 信号 要 使 用 signals 关键 字 ， 在 signals 前 面 不 能 使 

用 public 、 private 和 protected 等 限定 符 ， 因 为 只 有 定义 该 信号 的 类 及 其 子 类 才 可 以 发 射 
该 信号 。 而 且 信 号 只 用 声明 ， 不 需要 也 不 能 对 它 进行 定义 实现 。 还 要 注意 ， 信 号 没有 返回 
值 ， 只 能 是 void 类 型 的 。 因 为 只 有 Qobject 类 及 其 子 类 派生 的 类 才能 使 用 信号 和 槽 机 制 ， 这 
里 的 MyDialog 类 继承 自 apialog 类 ， Qpialog 类 又 继承 自 Qwidget 类 ， Qwidget 类 

是 Qobject 类 的 子 类 ， 所 以 这 里 可 以 使 用 信号 和 楼 。 不 过 ， 使 用 信号 和 楷 ， 还 必须 在 类 声明 
的 最 开始 处 添加 Q_oBJECT 宏 ， 在 这 个 程序 中 ， 类 的 声明 是 自动 生成 的 ， 已 经 添加 了 这 个 宏 。 
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在 mydialog.ui 对 应 的 界面 中 添加 一 个 spin Box 部 件 和 一 个 Push Button 部 件 ， 
将 pushButton 的 显示 文本 改 为 "确定 "。 然 后 转 到 pushButton 的 单 击 信号 clicked() 档 ， 更 改 
如 下 : 


void MyDialog::on_pushButton_clicked() // 确定 按钮 





{ 
int value = ui->spinBox->value(); V0 
emit dlgReturn(value); Ah 
close(); // 关上 
} 


当 单 击 确 定 按钮 时 ， 便 获取 spinBox 部 件 中 的 数值 ， 然 后 使 用 自 定义 的 信号 将 其 作为 参数 发 
射出 去 。 发 射 一 个 信号 要 使 用 emit 关键 字 ， 例 如 程序 中 发 射 了 dlgReturn() 信号 。 


然后 到 widget.h 文件 中 添加 自 定 义 槽 的 声明 : 


private Slots : 
void showValue(int value); 


声明 一 个 槽 需要 使 用 slots 关键 字 。 ee private 、 public 或 者 protected 类 型 
的 ， 槽 也 可 以 被 声明 为 度 函 数 ， 这 与 普通 的 成 员 函 数 是 一 样 的 ， 也 可 以 像 调 用 一 个 普通 函数 
一 样 来 调用 槽 。 宰 的 最 大 特点 就 是 可 以 和 言 号 关联 。 


下 面 打 开 widget .ui 文件， 向 界面 上 拖 入 一 个 Label 部 件 ， 然 后 更 改 其 文本 为 “获取 的 值 
是 :”。 然后 进入 widget.cpp 文件 中 添加 头 文件 #include "mydialog.h" ， 再 在 构造 函数 中 添 
加 代码 : 


ees 9 = new A 

// 将 对 话 框 中 的 自 定 号 与 主 界面 中 的 自 定 义 槽 进行 关联 

Ge this, SLOT(showValue(int))); 
dlg->show( ); 


这 里 创建 了 人 MyDialog ， 并 且 使 用 Widget 作为 父 部 件 。 然后 将 MyDialog 类 
的 dlgReturn() 信号 与 widget 类 的 showvalue() 槽 进行 关联 。 信 号 和 槽 进行 关联 ， 使 用 的 
是 QObject 类 的 connect() 函数 ， 这 个 函数 的 原型 如 下 : 


bool Qobject : :connect ( const QObject *sender, const char * signal, const Qobject * re 
ceiver, const char * method,Qt::ConnectionType type = Qt::AutoConnection ) 


它 的 第 一 个 参数 为 发 送信 号 的 对 象 ， 例 如 这 里 的 dlg ; 第 二 个 参数 是 要 发 送 的 信号 ， 这 里 
是 SIGNAL(dlgReturn(int)) ; 第 三 个 参数 是 接收 信号 的 对 象 ， 这 里 是 this ， 表 明 是 本 部 件 ， 
即 widget ， 当 这 个 参数 为 this 时 ， 也 可 以 将 这 个 参数 省 略 掉 ， 因 为 connect() 函数 还 有 另 
外 一 个 重 载 形式 ， 该 参数 默认 为 this ; 第 四 个 参数 是 要 执行 的 楷 ， 这 里 

是 SLOT(showvalue(int)) 。 对 于 信号 和 楷 ， 必 须 使 用 SIGNAL() 和 sLoT() 宏 ， 它 们 可 以 将 其 
参数 转化 为 const char* 类 型 。 和 函数 的 返回 值 为 bool 类 型 ， 当 关联 成 功 时 返 

回 true 。 还 要 注意 ， 在 调用 这 个 函数 时 信号 和 槽 的 参数 只 能 有 类 型 ， 不 能 有 变量 ， 例 如 写 


成 SLOT(showvalue(int value)) 是 不 对 的 。 对 于 信号 和 模 的 参数 问题 ， 基 本 原则 是 信号 中 的 参 
数 类 型 要 和 槽 中 的 参数 类 型 相对 应 ， 而 且 信 号 中 的 参数 可 以 多 于 槽 中 的 参数 ， 但 是 不 能 反 过 
来 ， 如 果 信 号 中 有 多 余 的 参数 ， 那 么 它们 将 被 忽略 。 下 面 介 绍 一 下 connect() 函数 的 最 后 一 
个 参数 ， 它 表明 了 关联 的 方式 ， 其 默认 值 是 Qt::Autoconnection ， 这 里 还 有 其 他 几 个 选择 ， 
在 编程 中 一 般 使 用 默认 值 ， 例 如 这 里 ， 在 MyDialog 类 中 使 用 emit 发 射 了 信号 之 后 ， 就 会 执行 
醒 ， 只 有 等 槽 执行 完了 以 后 ， 才 会 执行 emit 语 名 后面 的 代码 。 大 家 也 可 以 将 这 个 参数 改 

为 Qt::QueuedConnection ， 这 样 在 执行 完 emit 语句 后 便 会 立即 执行 其 后 面 的 代码 ， 而 不 管 槽 
是 否 已 经 执行 。 当 不 再 使 用 这 个 关联 时 ， 还 可 以 使 用 disconnect() 函数 来 断 开 关联 。 


下 面 是 自 定 义 楼 的 实现 ， 在 这 里 只 是 简单 的 将 参数 传递 来 的 数值 显示 在 了 标签 上 。 因 为 这 里 
使 用 了 中 文 ， 所 以 大 家 记 着 在 main.cpp 文件 中 添加 相关 代码 。 


void Widget::showValue(int value) // 自 定义 模 


ui->label->setText(tr(" 获 取 的 值 是 :%1").arg(value)); 
} 


现在 大 家 可 以 运行 一 下 程序 查看 效果 。 如 下 图 所 示 。 


有 Dialog 





这 个 程序 中 自 定义 了 信号 和 楷 ， 可 以 看 到 它们 的 使 用 是 很 简单 的 ， 只 需要 对 它们 进行 关联 ， 
然后 在 适当 的 时 候 发 射 信号 就 行 。 下 面 列举 一 下 使 用 信号 和 模 应 该 注意 的 几 点 : 

需要 继承 自 Qobject 或 其 子 类 ; 

在 类 声明 的 最 开始 处 添加 Q_0BJECT 宏 ; 

构 中 的 参数 的 类 型 要 和 信号 的 参数 的 类 型 相对 应 ， 且 不 能 比 信号 的 参数 多 ; 


信号 只 用 声明 ， 没 有 定义 ， 且 返回 值 为 void 类 型 。 


二 、 信 号 和 楼 的 自动 关联 


信号 和 槽 还 有 一 种 自动 关联 方式 ， 例 如 前 面 程序 中 在 设计 模式 直接 生成 的 按钮 的 单 击 信号 的 
槽 ， 就 是 使 用 的 这 种 方式 : on_pushButton_clicked() ， 它 由 “on”、 部 件 的 objectName 和 信号 
三 部 分 组 成 ， 中 间 用 下 划 线 隔 开 。 ee 
用 connect() 驾 数 。 不 过 使 用 这 种 方式 还 要 进行 其 他 设置 ， 而 前 面 之 所 以 可 以 直接 使 用 ， 是 因 
为 程序 中 默认 已 经 进行 了 设置 。 as is 


新 建 Qt Gui 应 用 ， 项 目 名 称 为 mysignalslot2 ， 基 类 选择 Qwidget ， 然 后 类 名 保持 widget 不 
变 。 完 成 后 先 在 widget.h 文件 中 进行 函数 声明 : 


private Slots : 
void on myButton_clicked(); 


这 里 自 定义 了 一 个 模 ， 它 使 用 自动 关联 。 然 后 在 widget.cpp 文件 中 添加 头 文 
件 #include <QPushButton> ， 再 将 构造 函数 的 内 容 更 改 如 下 


Widget::Widget(QWidget *parent) : 





QWidget (parent), 
ui(new Ui::Widget) 
{ 
QPushButton *button = new QPushButton(this); // 创下 鱼 
button- Ss // 4 汐 对 输 名 
ui->setupUi(this); // 要 在 定义 了 部 件 以 后 再 调用 这 个 函数 
} 


因为 在 setupUi() 函数 中 调用 了 connectSlotsByName() 函数 ， 所 以 要 使 用 自动 关联 的 部 件 的 定 
义 都 要 放 在 setupui() 函数 之 前 ， 而 且 还 必须 使 用 setobjectName() 函数 指定 它们 
的 objectName ， 只 有 这 样 才 能 正常 使 用 自动 关联 。 下 面 是 槽 的 定义 : 


void Widget::on_myButton_clicked() // 使 用 自动 关联 


close(); 


这 里 进行 了 关闭 部 件 的 操作 。 对 于 模 的 函数 名 ， 中 间 要 使 用 ee objectName ， 这 里 
是 myButton 。 现 在 运行 一 下 程序 ， 单 击 按钮 ， 发 现 可 以 正常 关闭 窗 


可 以 看 到 ， 如 果 要 使 用 信号 和 槽 的 自动 关联 ， 就 必须 在 connectslotsByName() 函数 之 前 进行 部 

件 的 定义 ， 而 且 还 要 指定 部 件 的 objectName “ 鉴于 这 些 约束 ， 虽 然 自动 关联 形式 上 很 简单 ， 

CO 

用 connect() 函数 来 对 其 进行 信号 和 槽 的 关联 ， 这 样 当 别人 看 到 这 个 部 件 定义 时 ， 就 可 以 知 
道 和 它 相 关 的 信号 和 槽 的 关联 了 。 而 使 用 自动 关联 ， 却 没有 这 么 明了 。 


三 、 信 号 和 模 的 高 级 应 用 


有 时 我 们 希望 获得 信号 发 送 者 的 信息 ， 在 Qt 中 提供 了 Qopject::sender() 函数 来 返回 发 送 该 信 
号 的 对 象 的 指针 。 但 是 如 果 有 多 个 信号 关联 到 了 同一 个 档 上 ， 而 在 该 槽 中 需要 对 每 一 个 信和 号 
进行 不 同 的 处 理 ， 使 用 上 面 的 方法 就 很 麻烦 了 。 对 于 这 种 情况 ， 便 可 以 使 


用 QsignalMapper 类 。 QsignalMapper 可 以 被 叫做 信号 映射 器 ， 它 可 以 实现 对 多 个 相同 部 件 的 
相同 信号 进行 映射 ， 为 其 添加 字符 串 或 者 数值 参数 ， 然 后 再 发 射出 去 。 对 于 这 个 类 的 使 用 ， 

大 家 可 以 参考 《Qt 及 Qt Quick 开 发 实战 精 解 》 的 1.3.3 小 节 ， 那 里 有 这 个 类 的 实际 应 用 。 还 有 
就 是 Qt 的 演示 程序 中 的 Tools 分 类 下 的 Input Panel 示例 程序 中 也 使 用 了 这 个 类 ， 大 家 也 可 
以 参考 一 下 这 个 程序 。 在 这 里 便 不 再 详细 讲述 这 个 类 的 使 用 了 。 


在 本 节 的 最 后 ， 来 看 一 下 信号 和 槽 机 制 的 特色 和 优越 性 : 


e 信号 和 槽 机制 是 类 型 安全 的 ， 相 关联 的 信号 和 槽 的 参数 必须 匹配 ; 
。 信号 和 槽 是 松 耦 合 的 ， 信 号 发 送 者 不 知道 也 不 需要 知道 接受 者 的 信息 ; 
。 信号 和 楼 可 以 使 用 任意 类 型 的 任意 数量 的 参数 。 


虽然 信号 和 槽 机 制 提供 了 高 度 的 灵活 性 ， 但 就 其 性 能 而 言 ， 还 是 慢 于 回调 机 制 的 。 当 然 ， 这 
点 性 能 差异 通常 在 一 个 应 用 程序 中 是 很 难 体现 出 来 的 。 


涉及 到 的 代码 : 


。 mySignalSlot.rar 
e。 mySignalSlot2.rar 
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导语 


一 个 完善 的 应 用 程序 不 仅 应 该 有 实用 的 功能 ， 还 要 有 一 个 漂亮 的 外 观 ， 这 样 才 能 使 应 用 程序 
更 加 友善 ， 更 加 吸引 用 户 。 作 为 一 个 跨 平 台 的 UI 开 发 框架 ，Qt 提 供 了 强大 而 灵活 的 界面 外 观 
设计 机 制 。 Qt 样式 表 是 一 个 可 以 自 定义 部 件 外 观 的 十 分 强大 的 机 制 。Qt 样 式 表 的 概念 、 术 语 
和 语法 都 受到 了 HTML 的 层 和 全 样式 表 (Cascading StyleSheets，CSS ) 的 启发 ， 不 过 与 CSS 
不 同 的 是 ，Qt 样 式 表 应 用 于 部 件 的 世界 。 


环境 : Windows Xp + Qt 4.8.5+QtCreator2.8.0 


目录 


。 一 、 简 介 

、 在 设计 模式 使 用 Qt 样式 表 
、 在 代码 中 设置 Qt 样式 表 
e 四 、 样 式 表 语法 
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正文 
一 、 简 介 


要 学 习 Qt 样 式 表 ， 需 要 对 其 有 一 个 全 面 的 了 解 ， 应 该 知道 它 到 底 有 什么 用 ， 可 以 给 哪些 部 件 
设置 样式 。 为 了 了 解 这 些 内 容 ， 我 们 先 在 Qt 帮助 中 查看 Qt StyleSheets 关 键 字 ， 如 下 图 所 示 。 


Qt Style Sheets 


二 Home Qt Sstyle Sheets 


Qt Style Sheets are a powerful mechanism that allows YOU to c 
subclassing Qstyle. The concepts, terminology, and syntax of Qt 
adapted to the world of widgets. 


Topics: 
mn Overview 
" The Style Sheet Syntax 
" QtDesigner Integration 
" Customizing Qt widgets Using Style Sheets 
ma Qt style Sheets Reference 
m Qt Style Sheets Examples 


Overvl ev 


Styles sheets are textual specifications that can be set on the Who 
several style sheets are set at different levels, Qt derives the effecti, 


这 里 将 所 有 内 容 分 为 了 几 部 分 : The Style Sheet Syntax 中 介绍 了 Qt 样式 表 的 语法 ， 就 是 一 些 
使 用 规则 ; Qt Designer Integration 中 介绍 了 如 何在 设计 器 中 使 用 Qt 样式 表 ; CustomizingQt 
Widgets Using Style Sheets 中 介绍 了 如 何 使 用 Qt 样式 表 来 定制 部 件 样式 ; QtStyle Sheets 
Reference 中 罗列 了 Qt 中 所 有 可 以 使 用 样式 表 的 部 件 ; QtStyle Sheets Examples 中 列 出 了 常 
用 部 件 使 用 样式 表 的 例子 ， 这 个 是 我 们 后 面 学 习 使 用 时 的 重要 参考 。 


二 、 在 设计 模式 使 用 Qt 样式 表 


1 新 建 Qt Gui 应 用 ， 项 目 名 称 为 mystyle ， 其 他 保持 默认 即 可 。 完 成 后 打 
开 mainwindow.ui 进入 设计 模式 ， 然 后 拖 入 一 个 Push Button 按钮 。 


2 在 按钮 部 件 上 右 击 ， 选 择 “ 改 变样 式 表 ”菜单 项 ， 在 弹出 的 编辑 样式 表 对 话 框 中 点 击 “ 添 加 赢 
色 " 下 拉 框 ， 然 后 选择 background-color ， 我 们 为 其 添加 背景 颜色 。 如 下 图 所 示 。 
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和 吧 编辑 样式 表 


添加 资源 * 添加 渐变 ~， 添加 颜色 “| 添加 字体 
es 


和 color 











HET 
alternate-backeround-color 
border-color 
border-top-color 
border-rieht-color 
border-bottom-color 
border-left-color 





ridine-color 


selection-color 
selection-backeround-color 


im RE [Ca [Ca [和 











这 时 会 弹出 选择 颜色 按钮 ， 大 家 可 以 随便 选择 一 个 颜色 ， 这 里 选择 了 红色 ， 然 后 点 击 确定 按 
钮 关闭 对 话 框 。 添 加 好 的 代码 如 下 图 所 示 。 这 种 方法 可 以 快速 设置 样式 表 ， 当 然 我 们 也 可 以 
自己 手动 来 添加 代码 。 


% 编辑 样式 表 


添加 资源 * 添加 渐变 * 添加 颜色 v 添加 字体 
backer ound-color: reb [55，0，D0); 








L 一 


有 








3 . 完成 后 大 家 可 能 发 现 按钮 的 颜色 并 没有 改变 ， 不 要 着 急 ， 这 时 运行 程序 ， 发 现 已 经 有 效果 
了 。 如 下 图 所 示 。 
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4 . 其 实在 设计 模式 还 可 以 很 容易 地 使 用 背景 图 片 ， 这 个 需要 使 用 Qt 资源 ， 大 家 可 以 试 试 ， 这 
里 就 不 再 介绍 。 


三 、 在 代码 中 设置 Qt 样式 表 


既然 在 设计 器 中 可 以 使 用 样式 表 ， 那 么 使 用 代码 就 一 定 可 以 实现 。 在 代码 中 可 以 使 
用 setstylesheet() 函数 来 设置 样式 表 ， 不 过 用 两 种 设置 方法 。 


1 设置 所 有 的 相同 部 件 都 使 用 相同 的 样式 。 我 们 在 mainwindow.cpp 的 构造 函数 中 添加 如 下 代 


码 : setstylesheet("QPushButton { color: white }"); 


这 时 运行 程序 ， 效 果 如 下 图 所 示 。 


W 编辑 样式 表 


“添加 资源 ” 添加 渐变 “~ 添加 颜色 “| 添加 字体 











| color 
hackagrourd-eolor 
alternate-backer ound-color 
border-color 
border-top-color 
border-rieht-color 
border-bottom-color 
border-left-color 
Bidine-color 
selection-color 


selection-backeround-color 
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可 以 看 到 按钮 的 文本 颜色 变 成 了 白色 ， 不 过 这 种 方式 是 给 所 有 QPushButton 类 对 象 设置 的 样 
式 。 也 就 是 说 ， 我 们 再 往 界 面 上 拖 放 其 他 的 Push Button ， 它 的 文本 顾 色 也 会 变 成 白 色 。 


2 那么 怎样 才能 只 给 特定 的 一 个 按钮 设置 样式 表 呢 ， 这 就 需要 使 用 第 二 种 方式 了 。 我 们 接着 
在 mainwindow.cpp 构造 函数 中 添加 代码 : 


ui->pushButton->setSstyleSheet("color: blue"); 


这 样 就 是 只 给 先前 添加 的 pushButton 按钮 设置 了 样式 ， 将 文本 颜色 设置 为 蓝 色 。 为 了 有 一 个 
对 比 ， 大 家 可 以 再 往 界面 上 拖 入 一 个 Push Button 按钮 ， 然 后 运行 程序 ， 如 下 图 所 示 。 


| EP pliTto 同上 回 因 


PushButton 





也 许 现在 又 会 问 了 ， 怎 么 按钮 的 背景 不 是 红色 的 了 ?这 是 因为 一 个 部 件 只 能 单独 设置 一 个 样 
式 表 ， 我 们 在 代码 中 为 pushButton 设置 了 样式 表 就 会 屏蔽 设计 器 os 。 这 里 只 是 说 单独 
为 一 个 部 件 同时 设置 了 多 个 样式 表 会 出 现 这 种 情况 ， 如 果 对 其 父 类 进行 设置 ， 则 只 会 对 其 有 
影响 ， 但 是 不 会 屏蔽 看 自 己 的 样式 表 ， 比 如 前 面 按钮 的 红 ee 这 种 情况 。 


下 面 我 们 把 代码 更 改 如 下 : 


ui->pushButton->setStyleSheet("background-color:red; color: blue"); 


再 次 运行 程序 ， 可 以 发 现 已 经 是 红 底 蓝 字 了 。 效 果 如 下 图 所 示 。 
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现在 大 家 应 该 可 以 了 解 到 ， 我 们 前 面 在 设计 模式 中 就 是 只 为 指定 的 pushButton 按钮 设置 了 背 
时 
京 。 


四 、 样 式 表 语 法 
1 样式 规则 


样式 表 和 包含 了 一 系列 的 样式 规则 ， 一 个 样式 规则 由 一 个 选择 符 (selector) 和 一 个 声明 
(declaration) 组 成 。 选 择 符 指定 了 受 该 规则 影响 的 部 件 ; 声明 指定 了 这 个 部 件 上 要 设置 的 属 
性 。 例 如 : 


QPUShButton{color:red} 


在 这 个 样式 规则 中 ， QpushButton 是 选择 符 ， {color:red} 是 声明 ， 而 color 是 属 

性 ，red 是 值 。 这 个 规则 指定 了 QpushButton 和 它 的 子 类 应 该 使 用 红色 作为 它们 的 前 景色 。 

Qt 样式 表 中 一 般 不 区 分 大 小 写 ， 例 如 color 、 color 、 COLOR 和 coloR 表示 相同 的 属性 。 只 
有 类 名 ， 对 象 名 和 Qt 属性 名 是 区 分 大 小 写 的 。 一 些 选择 符 可 以 指定 相同 的 声明 ， 只 需要 使 用 
过 号 隔 开 ， 例 如 : 


QPuUsShButton, QLineEdit,QComboBox{color:red} 


一 个 样式 规则 的 声明 部 分 是 一 些 属性 : 值 对 组 成 的 列表 ， 它 们 包含 在 大 括号 中 ， 使 用 分 号 隔 
开 。 例 如 : 


QPushButton{tcolor:red;background-color:white} 


2 . 子 控件 (Sub-Controls ) 


对 一 些 复 杂 的 部 件 修改 样式 ， 可 能 需要 访问 它们 的 子 控件 ， 例 如 QcomboBox 的 下 拉 按 钮 ， 还 
有 QspinBox 的 向 上 和 向 下 的 箭头 等 。 选 择 符 可 以 包含 子 控件 来 对 部 件 的 特定 子 控件 应 用 规 
则 ， 例 如 : 


QComboBox: :drop-down{image:url(dropdown.png)} 


这 样 的 规则 可 以 改变 所 有 的 QcomboBox 部 件 的 下 拉 按 钮 的 样式 。 在 Qt Style Sheets Reference 
关键 字 对 应 的 帮助 文档 的 List of Stylable Widgets 一 项 中 列 出 了 所 有 可 以 使 用 样式 表 来 自 定义 
样式 的 Qt 部 件 ， 在 List of Sub-Controls 一 项 中 列 出 了 所 有 可 用 的 子 控件 。 


3 伪 状 态 (Pseudo-States) 


选择 符 可 以 包含 伪 状 态 来 限制 规则 在 部 件 的 指定 的 状态 上 应 用 。 伪 状态 出 现在 选择 符 之 后 ， 
用 冒号 隔离 ， 例 如 : 


QPushButton:hover{color:white} 


这 个 规则 表明 当 和 鼠标 悬 停 在 一 个 QPushButton 部 件 上 时 才 被 应 用 。 伪 状态 可 以 使 用 感叹 号 来 表 
示 否 定 ， 例 如 要 当 饼 标 没 有 莫 停 在 一 个 QRadioButton 上 时 才 应 用 规则 ， 那 么 这 个 规则 可 以 写 
为 : 


QRadioButton: !hover{color:red} 


伪 状 态 还 可 以 多 个 连用 ， 达 到 逻辑 与 效果 ， 例 如 当 和 鼠标 悬 停 在 一 个 被 选中 的 QCheckBox 3 部 件 
上 时 才 应 用 规则 ， 那 么 这 个 规则 可 以 写 为 : 


QCheckBox:hover:checked{color :white} 


如 果 有 需要 ， 也 可 以 使 用 过 号 来 表示 逻辑 或 操作 ， 例 如 
QCheckBox:hover,QCheckBox:checked{color:white} 

在 Qt Style Sheets Reference 关 键 字 对 应 的 帮助 文档 的 List of Pseudo-States 一 项 中 列 出 了 Qt 

支持 的 所 有 的 伪 状 态 。 

4 例子 


大 家 可 以 在 Qt Style Sheets Examples 页 面 找到 很 多 相关 的 例子 来 学 习 ， 例 如 ， 下 面 
是 QspinBox 部 件 的 一 段 样式 表 : 


QSpinBox { 
padding-right: 1i5px; /* make room for the arrows */ 
border-image: url(:/images/frame.png) 4; 
border-width: 3; 
} 
QSpinBox: :up-button { 
subcontrol-origin: border; 
subcontrol-position: top right; /* position at the top right corner */ 
width: L160xX> /T1672*1px border=widthne— lspx paddang rspx paremnt border® x 
border-image: url(:/images/spinup.png) 1; 
border-width: 1px; 
} 
QSpinBox: :up-button:hover { 
border-image: url(:/images/spinup_hover.png) 1; 
} 


QSpinBox: :up-button:pressed { 
border-image: url(:/images/spinup_pressed.png) 1; 
} 


QSpinBox: :up-arrow { 
image: url(:/images/up_arrow.png); 
width: 7px; 
height :7X 

} 


QSpinBox: :up-arrow:disabled, QSpinBox::up-arrow:off { /* off state when Value is max */ 


image: url(:/images/up_arrow_disabled.png); 
} 
QSpinBox: :down-button { 
subcontrol-origin: border; 
subcontrol-position: bottom right; /* position at bottom right corner */ 
WardEEm Ox 
border-image: url(:/images/spindown.png) 1; 
border-width: 1px; 
border-top-width: 0; 
} 
QSpinBox: :down-button:hover { 
border-image: url(:/images/spindown_hover.png) 1; 
} 


QSpinBox: :down-button:pressed { 
border-image: url(:/images/spindown_pressed.png) 1; 
} 
QSpinBox: :down-arrow { 
image: url(:/images/down_arrow.png); 
width: 7px; 
height: 7OxX> 
} 


QSpinBox: :down-arrow:disabled, 

QSpinBox: :down-arrow:off { /* off state when value in min */ 
image: url(:/images/down_arrow_disabled.png); 

} 


了 到 
结语 


要 想 为 软件 设计 一 个 漂亮 的 界面 ， 需 要 灵活 使 用 Qt 样式 表 ， 不 过 这 需要 一 定 的 CSS 功 底 ， 还 
需要 有 美工 经 验 。 这 一 节 只 是 简单 介绍 了 下 Qt 中 样式 表 的 应 用 ， 只 为 抛砖引玉 。 大 家 也 可 以 
参考 《QtCreator 快 速 入 门 》 第 8 章 的 相关 内 容 ， 里 面 还 涉及 到 了 换 肤 、 透 明 窗 体 、 不 规矩 窗 
体 等 内 容 。 


涉及 到 的 代码 


第 45 篇 进 阶 (五 ) Qt 样式 表 
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第 46 篇 进 阶 (六 ) 国际 化 


导语 


在 第 2 篇 中 讲述 如 何 显 示 中 文 时 ， 曾 提 到 使 用 QTextcodec 和 tr() 的 方式 直接 显示 中 文 ， 其 实 
这 只 是 一 种 临时 的 方法 ， 方 便 我 们 快速 完成 程序 ， 显 示 效 果 。 当 卓 正 要 发 布 一 个 程序 时 ， 最 
好 的 方式 是 在 程序 中 使 用 英文 字符 串 ， 而 后 使 用 国际 化 工具 进行 翻译 。 


国际 化 的 英文 表述 为 Internationalization， 通 常 简写 为 I18N (首尾 字母 加 中 间 的 字符 数 ) ， 一 
个 应 用 程序 的 国际 化 就 是 使 该 应 用 程序 可 以 让 其 他 国家 的 用 户 使 用 的 过 程 。Qt 支 持 现在 使 用 
的 大 多 数 语 言 ， 特 别 是 


。 所 有 东亚 语言 (汉语 、 日 语 和 朝鲜 语 ) 
。 所 有 西方 语言 (使 用 拉丁 字母 ) 

e 阿拉 伯 语 

。 西里 尔 语 言 〈 俄 语 和 乌克兰 语 等 ) 

e 布 腊 语 

。 和希 伯 来 语 

。 泰语 和 老挝 语 

e。 所 有 在 Unicode5.1 中 不 需要 特殊 处 理 的 脚本 


OF A A A OU ST i TY Qt 内 
置 的 字体 引擎 可 以 在 同一 时 间 正 确 而 且 精 细 的 绘制 不 同 的 文本 ， 这 些 文本 可 以 包含 来 自 众 多 
不 同 书写 系统 的 字符 。 


在 Qt 中 可 以 使 用 Qt Linguist 工 具 来 很 容易 的 完成 应 用 程序 的 翻译 工作 ， 在 Qt 中 编写 时 要 对 


需要 显示 的 字符 串 调用 tr() 函数 ， 完 成 代码 编写 后 ， 对 这 个 应 用 程序 的 翻译 主要 包含 三 步 : 
。 运行 lupdate 工 具 从 C++ 源 代码 中 提取 要 翻译 的 文本 ， 这 时 会 生成 一 个 ,ts 文件 ， 这 个 文 
件 是 XML 格式 的 ; 


。 在 Qt Linguist 中 打开 .ts 文件 ， 并 完成 翻译 工作 ; 

e@ 运行 lrelease 工 具 从 .ts 文件 中 获得 .qm 文件 ， 它 是 一 个 二 进 制 文件 。 这 里 的 ,ts 文件 
是 供 翻 译 人 员 使 用 的 ， 而 在 程序 运行 时 只 需要 使 用 .qm 文件 ， 这 两 个 文件 都 是 与 平台 无 
关 的 。 


环境 : Windows Xp + Qt 4.8.5+QtCreator2.8.0 


目录 


。 一 、 编 写 源码 


。 二 、 更 改 项 目 文件 

、 使 用 Iupdate 生 成 .ts 文件 
。 四 、 使 用 QtLinguist 完 成 翻译 

e 五 、 使 用 Irelease 生 成 ,qm 文件 
。 六 、 使 用 ,qm 文件 


hn 


正文 
一 、 编 写 源码 


1 新 建 Qt Gui 应 用 ， 项 目 名 称 为 myI18N ， 类 名 为 Mainwindow ， 基 类 保持 QMainwindow 不 


本 
:> 


2 建立 完 项 目 后 ， 点 击 mainwindow.ui 文件 进入 设计 模式 ， 先 添加 一 个 &File 菜单 ， 再 为 其 
添加 一 个 &New 子 菜单 并 设置 决 捷 键 为 Ctrl+N (不 会 操作 ， 查 看 这 里 ) ， 然 后 往 界 面 上 拖 入 


一 个 push Button 。 


3 :下面 我 们 再 使 用 代码 添加 几 个 标签 ， 打开 mainwindow.cpp 文件 ， 添 加 头 文 
件 #include <QLabel> ， 然 后 在 构造 函数 中 添加 代码 : 


QLabel] *label = new QLabel(this); 
label->setText(tr("hello Qt!")); 
label->move(100,50); 

QLabel *label2 = new QLabel(this); 
label2->setText(tr("password", "mainwindow")); 
label2->move(100, 80); 

QLabel *label3 = new QLabel(this); 

ld = 23. 

QString name = "yafei"; 
label3->setText(tr("ID Is %1,Name Is %2").arg(id).arg(name)); 
label3->resize(150, 12); 
label3->move(100,120); 


这 里 向 界面 上 添加 了 三 个 标签 ， 因 为 这 三 个 标签 中 的 内 容 都 是 用 户 可 见 的 ， 所 以 需要 调 
用 tr() 函数 。 在 label2 中 调用 tr() 函数 时 ， 还 使 用 了 第 二 个 参数 ， 其 实 tr() 函数 一 共有 
三 个 参数 ， 它 的 原型 如 下 : 


QString QObject::tr( const char * sourceText, const char * disambiguation = 0, int n = 
-1 )[static] 


相册 | 


第 一 个 参数 sourceText 就 是 要 显示 的 字符 串 ? ERORES 函数 会 返回 sourceText 的 译文 ; 第 二 个 | 
参数 disambiguation 是 消除 歧义 字符 串 ， 比 如 这 里 的 password ， 如 果 一 个 程序 中 需要 输入 多 
个 不 同 的 密码 ， 那 么 在 没有 上 下 文 的 情况 下 ， 就 很 难 确 定 这 个 password I °。 辽 
个 参数 一 般 使 用 类 名 或 者 部 件 名 ， 比 如 这 里 使 用 了 mainwindow ， 就 说 明 这 个 password 是 


在 mainwindow 上 的 ; 第 三 个 参数 n 表 明 是 否 使 用 了 复数 ， 因 为 英文 单词 中 复数 一 般 要 在 单词 
末尾 加 “S”， 比 如 “1 message”， 复 数 时 为 "2 messages”。 遇 到 这 种 情况 ， 就 可 以 使 用 这 个 参 
数 ， 它 可 以 根据 数值 来 判断 是 否 需 要 添加 “S”。 


4 . 运行 程序 效果 如 下 图 所 示 。 


国生 EER pli 人 Tt 


hello tl 
password 


ID is 123, Jame 15 Yafel 


PuskhButtom 





二 、 更 改 项 目 文件 


我 们 要 在 项 目 文 件 中 指定 生成 的 .ts 文件 ， 每 一 种 翻译 语言 对 应 一 个 ,ts 文件 。 打 
开 myIl8N.pro 文件 ， 在 最 后 面 添加 如 下 一 行 代 码 : 


TRANSLATIONS = myI18N_zh_CN.ts 


这 表明 后 面 生成 的 ,ts 文件 的 文件 名 为 myI18N_zh_cN.ts ， 对 于 .t S 的 名 称 可 以 随意 编写 ， 
不 过 一 般 是 以 区 域 代码 来 结尾 ， 这 样 可 以 更 好 的 区 分 ， 例 如 这 里 使 用 了 zh_CN" 来 表示 简体 中 
文 。 最 后 需要 先 按 下 ctrlts 保存 该 文件 。 


三 、 使 用 lupdate 生 成 .ts 文件 


可 以 通过 工具 -> 外 部 ->Qt 语 言 家 -> 更 新 翻译 Iupdate 菜 单项 来 完成 该 操作 。 这 时 会 在 概要 信息 
处 显示 如 下 信息 : 


启动 外 部 工具 'C:/Qt/4.8.5/bin/lupdate.exe'E:/myI18N/myI18N.pro 
C:/Qt/4.8.5/mkspecs/features/device config.prf(13):Querying unknown property CROSS_ COM 
PILE 

Updating 'myIi18N_ zh_CN.ts'... 

Found 8 source text(s) (8 new and 0 already existing) 
'C:/Qt/4.8.5/bin/lupdate.exe' 完 成 


完成 后 可 以 在 源码 目录 看 到 生成 的 myI18N_zh_cN.ts 文件 。 


四 、 使 用 Qt Linguist 完 成 翻译 


这 一 步 一 般 是 翻译 人 员 来 做 的 ， 就 是 在 Qt Linguist 中 打开 .ts 文件 ， 然 后 对 字符 串 逐 个 进行 
翻译 。 我 们 在 系统 的 开始 菜单 中 启动 Linguist (也 可 以 直接 在 命令 行 输入 “linguist" 启 动 它 ; 或 
者 在 Qt 安装 目录 的 tools 目录 下 找到 并 启动 它 ) ， 然 后 点 击 界面 左上 和 角 的 “打开 ”图 标 ， 在 弹出 
的 文件 对 话 框 中 进入 项 目 目 录 ， 打 开 myI1l8N_zh_cN 文件 ， 这 时 整个 界面 如 下 图 所 示 。 


WE:\mnyIl8H\nyI18H zh _CH.ts - Qt 语言 家 
交 件 区 ) ”编辑 正 ) ”译文 代 ) ”验证 多) 短语 FE) 查看 WW) 帮助 0 


:9 名 明史 ||&|PI 的 I@ 
吕 x| | 字符 审 加 x| 
时 | 上 下 六 | 项 | Sd 源 文 | OE 3zHaingwindos 
NainWindor O08 | Nainhindow 人 


党 PushButton 
File 


























最 hello Qt! 
? password 
最 IT is N,NHame is 所 











源 文 


MainWindow 


汉语 译文 








汉语 译文 注释 






































下 面 来 翻译 程序 。 在 翻译 区 域 可 以 看 到 现在 已 经 是 要 翻译 成 汉语 ， 这 是 因为 我 们 的 ,ts 文件 
名 中 包含 了 中 文 的 区 域 代码 。 如 果 这 里 没有 正确 显示 要 翻译 成 的 语言 ， 那 么 可 以 使 用 " 编 

辑 " 一 “翻译 文件 设置 ?菜单 来 更 改 。 下 面 首先 对 Mainwindow 进行 翻译 ， 这 里 翻译 为 “应 用 程序 主 
窗口 ”， 然 后 按 下 ctrltReturn ( 即 回 车 键 ) 完成 翻译 并 开始 翻译 第 二 个 字符 串 。 按 照 这 种 方 
法 完成 所 有 字符 串 的 翻译 工作 ， 如 下 表 所 示 。 


Mainwindow 应 用 程序 主 窗口 
PushButton 按钮 

&File 文件 (&F) 
&New 新 建 (&N ) 
Ctrl+N Ctrl+N 
hello Qt ! 你 好 Qt ! 
password 密码 


ID is %1,Name is %2 账号 是 %1， 名 字 是 %2 


翻译 完成 后 按 下 ctrl+ts 保存 更 改 ， 然 后 退出 Qt Linguist 。 
五 、 使 用 Irelease 生 成 .qm 文件 
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-> 外 部 ->Qt 语 言 家 -> 发 布 翻 译 Irelease 菜 单项 来 完成 该 操作 。 这 时 会 在 概要 信息 


可 以 通过 工具 
处 显示 如 下 信息 : 


外 


启动 外 部 工具 'C:/Qt/4.8.5/bin/lrelease.exe'E:/myI18N/myI18N.pro 

Updating 'E:/myI18N/myI18N_zh_CN.qm'... 

Generated 8 translation(s) (8 finished and Qunfinished) 
C:/Qt/4.8.5/mkspecs/features/device config.prf(13):Querying unknown property CROSS_ COM 
PILE 

'C:/Qt/4.8.5/bin/lrelease.exe' 完 成 


这 时 在 源码 目录 会 看 到 myI18N_zh_cN.qm 文件 。 
六 、 使 用 .qm 文件 


下 面 在 项 目 中 添加 代码 使 用 .gm 文件 来 更 改 界面 的 语言 言 o。 进 入 main.cpp 文件 ， 添加 头 文 
件 #include <QTranslator> ， 然 后 在 QApplication a(argc，argv); 代码 下 添加 如 下 代码 : 


QTranslator translator,; 
translator.load("../myI18N/myI18N_zh_CN.qm"); 
a.installTranslator(&translator); 


这 里 先 加 载 了 .qm 文件 (使 用 了 相对 路 径 ) ， 然 后 为 QApplication 对 象 安装 了 翻译 。 运 行程 
序 ， 效 果 下 图 所 示 。 


图 应 用 程序 主 窗口 辕 回 因 


你 好 Qt 
密码 


账号 是 123， 名字 是 yafei 





这 一 节 简 单 介绍 了 一 个 使 用 Qt 语言 家 实现 国际 化 的 例子 ， 可 以 看 到 翻译 一 个 程序 其 实 是 很 简 
单 的 。Qt 中 还 可 以 设置 自动 判断 语言 环境 、 动 态 进 行 语言 更 改 等 功能 ， 详 细 内 容 可 以 参考 帮 
助 文档 Internationalizationwith Qt 或 者 参考 《Qt Creator 快 速 入 门 》 第 9 章 的 相关 内 容 。 


涉及 到 的 源码 


第 46 篇 进 阶 (六 ) 国际 化 
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进 阶 (七 ) 定制 Qt 帮助 系统 
导语 


一 个 完善 的 应 用 程序 应 该 提供 尽 可 能 丰富 的 帮助 信息 。 在 Qt 中 可 以 使 用 工具 提示 、 状 态 提 示 
以 及 “What's This” 等 简单 的 帮助 提示 ， 也 可 AAA 0 。 如 果 
要 进行 详细 的 功能 和 使 用 的 介绍 ， 单 单 使 用 这 些 提示 信息 是 不 行 的 ， ee 
的 帮助 文本 。 在 程序 中 可 以 通过 调用 VWeb 浏 览 有 QTextBrowser 来 管理 和 应 用 这 

HTML 文 件 。 不 过 ，Qt 提 供 了 更 加 强大 的 工具 ， 那 就 是 Qt Assistant ， 

索 ， 而 且 可 以 为 多 个 应 用 程序 同时 提供 帮助 ， 我 们 可 以 通过 定制 Qt Assistant 来 实现 强大 的 在 
线 帮助 系统 。 


为 了 将 Qt Assistant 定 制 为 我 们 自己 的 应 用 程序 的 帮助 浏览 器 ， 需 要 先进 行 一 些 准备 工作 ， 主 
要 是 生成 一 些 文件 ， 最 后 再 在 程序 中 局 动 Qt Assistant。 主 要 的 步骤 如 下 : 


。 创建 HTML 格 式 的 帮助 文档 ; 

。 创建 Qt 帮助 项 目 (Qt help project) .qhp 文件 ， 该 文件 是 XML 格式 的 ， 用 来 组 织 文档 ， 
并 且 使 它们 可 以 在 Qt Assistant 中 使 用 ; 

。 生成 Qt 压缩 帮助 (Qt compressed help) .qch 文件 ， 该 文件 由 .qhp 文件 生成 ， 是 二 进 

制 文件 ; 

创建 Qt 帮助 集合 项 目 (Qt help collection project) .qhcp 文件 ， 该 文件 是 XML 格式 的 ， 

用 来 生成 下 面 的 ,qhc 文件 ; 

。 生成 Qt 帮助 集合 (Qt help collection ) .qhc 文件 ， 该 文件 是 二 进 制 文件 ， 可 以 使 Qt 
Assistant 只 显示 一 个 应 用 程序 的 帮助 文档 ， 也 可 以 定制 Qt Assistant 的 外 观 和 一 些 功能 ; 

e 在 程序 中 启动 Qt Assistant 。 


环境 : Windows Xp + Qt 4.8.5+QtCreator2.8.0 


目录 


。 一 、 创 建 HTML 格 式 的 帮助 文档 
e。 二、 创建 .qhp 文件 

e@ 三 、 生 成 ,qch 文件 

e。 四 、 创 建 .qncp 文件 

e 五 、 生 成 .qhc 文件 

、 在 程序 中 局 动 QtAssistant 


正文 


一 、 创 建 HTML 格 式 的 帮助 文档 


“ 新建 Qt Gui 应 用 ， 项 目 名 称 为 mywhatsThis ， 类 名 为 Mainwindow ， 基 类 保 
a QMainwindow 不 变 。 


2 然后 可 以 通过 各 种 编辑 器 例如 Microsoft Word 来 编辑 要 使 用 的 文档 ， 最 后 保存 为 HTML 格 
式 的 文件 ， 例 如 这 里 我 们 创建 了 5 个 HTML 文 件 。 然 后 在 项 目 目录 中 新 建文 件 夹 ， 命 名 

为 documentation ， 再 将 这 些 HTML 文 件 放 入 其 中 。 再 在 documentation 文件 夹 中 再 新 建 一 
个 images 文件 夹 ， 往 里 面 复制 一 个 图 标 图 片 ， 以 后 将 作为 Qt Assistant 的 图 标 ， 例 如 这 里 使 
用 了 yafeilinux.png 图 片 。 


二 、 创 建 .qhp 文件 


首先 在 documentation 文件 夹 中 创建 一 个 文本 文件 ， 然 后 进行 编辑 ， 最 后 另存 
为 myHelp.qhp ， 注 意 后 组 为 .qhp 。 文 件 的 内 容 如 下 : 


<?xml1 version="1.0"encoding="GB2312"?> 
<QtHelpProjectversion="1.0"> 
<namespace>yafeilinux.myHelp</namespace> 
<virtualFolder>doc</virtualFolder> 
<filterSection> 
“EOC> 
<section title=" 我 的 帮助 "ref="./index.html"> 
<section title=" 关 于 我 们 "ref="./aboutUs.html"> 
<section title=" 关 于 yafeilinux"ref="./about_yafeilinux.html"></section> 
<section title=" 关 于 Qt Creator 系 列 教程 " ref="./about_QtCreator.html"></section> 
</section> 
<section title=" 加 入 我 们 "ref="./joinUs.html"></section> 
</section> 
<AtOC> 
<keywords> 
<keyword name=" 关 于 "ref="./aboutUs.html"/> 
<keyword name="yafeilinux" ref="./about_yafeilinux.html"/> 
<keyword name="Qt Creator"ref="./about QtCreator.html"/> 
</keywords> 
<files> 
<file>about_QtCreator.html</file> 
<file>aboutUs.html</file> 
<file>about_yafeilinux.html</file> 
<file>index.html</file> 
<file>joinUs.html</file> 
<file>images/*.png</file> 
</files> 
</tiltersSect ion> 
</QtHelpProject> 


这 个 .qhp 文件 是 XML 格式 的 ， 对 于 XML 格式 不 是 这 里 介绍 的 重点 的 辣 
容 ， 如 果 大 家 想 了 解 XML 格 式 相 关 的 知识 ， 可 以 参考 这 里 。 在 第 一 行 是 XML 序言 ， 这 里 指定 

了 编码 encoding 为 GB2312， 这 样 就 可 以 使 用 中 文 了 ， 如 果 只 想 使 用 英文 ， 那 么 编码 一 般 是 
UTF-8 ; 第 二 行 指 定 了 QtHelppProject 版 本 为 1.0 ; 第 三 行 指 定 了 命名 空间 namespace ， 每 一 
个 .qhp 文件 的 命名 空间 都 必须 是 唯一 的 ， 命 名 空间 会 成 为 Qt Assistant 中 的 页 面 的 URL 的 第 
一 部 分 ， 这 个 在 后 面 的 内 容 中 会 涉及 到 ; 第 四 行 指 定 了 一 个 虚拟 文件 夹 virtualFolder ， 这 个 
文件 夹 并 不 需要 创建 ， 它 只 是 用 来 区 分 人 再 下 面 的 过 滤器 部 分 filterSection 标 签 包 含 了 
目录 表 、 索 引 和 所 有 文档 文件 的 列表 。 过 滤器 部 分 可 以 设置 过 滤器 属性 ， 这 样 以 后 可 以 在 Qt 


Assistant 中 通过 过 滤器 ee 的 显示 有 否 ， 不 过 ， 因 为 我 们 这 里 只 有 一 个 文档 ， 所 以 不 
需要 Qt 2 滤器 功能 ， 这 里 也 就 不 需要 设置 过 滤器 属性 ; 在 目录 表 toc (table 
ofcontents) 标签 中 创建 了 所 有 HTML 文 件 的 目录 ， 指 定 了 它们 的 标题 和 对 应 的 路 径 ， 这 里 设 
定 的 目录 表 为 : 


。 我 的 帮助 
o 关于 我 们 
sm 关于 yafeilinux 
@ 关于 Qt Creator 系 列 教程 
o 加 入 我 们 


然后 是 keywords 标签 ， 它 指定 了 所 有 索引 的 关键 字 和 对 应 的 文件 ， 这 些 关 键 字 会 显示 在 Qt 
Assistant 的 索引 页 面 ; 在 files 标签 中 列 出 了 所 有 的 文件 ， 也 包含 图 片 文件 。 


至 生成 .qch 文件 


这 里 为 了 测试 创建 的 文件 是 否 可 用 ， 可 以 先生 成 .qch ， 然 后 0 o 
样 运 行 QtAssistant 就 会 看 到 我 们 添加 的 文档 了 。 不 过 步 不 是 必须 的 。 We 
控制 台 ， 然 后 使 用 cd 命令 跳 转 到 项 目 目录 的 documentation 目录 中 ， 分 别 输入 下 面 的 命 
下 回 车 : 


站 


qhelpgeneratormyHelp.qhp -o myHelp.qch 
assistant -registermyHelp.qch 


要 保证 命令 可 以 正常 运行 ， 前 提 是 已 经 将 Qt 安装 目录 的 bin 目录 的 路 径 添加 到 了 系统 
的 PATH 环境 变量 中 。 命 令 运行 结果 如 下 图 所 示 。 


DOWS s 司 | 百 x 


Microsoft Windows XP [版 本 5.1.26001] 
T 有 1985-2961 Microsoft Corp- 


C:\Documents and Settings dministrator>E: 
E:N>cd myWhatsThis locumentation 


E:mnmyWhatsThis ocumentation>qhelpgenerator myHelp.ghp -o myHelp.qch 
Building up file structure... 
custom filters... 
help data for filter section 《1 of 1>2... 
上 
t contents... 
t indices... 
Documentation successfully generated. 


E:\myWhatsThis ocumentation2》assistant -register myHelp.gch 


E: myWhatsThis locumentation> 





当 注 册 成 功 时 ， 会 显示 “Documentationsuccessfully registered” 提 示 对 话 框 。 这 时 在 开始 菜 归 
中 启动 Qt Assistant (或 者 直接 在 命令 行 输入 assistant 来 启动 Qt Assistant) ， 可 以 发 现 已 经 出 
现 了 我 们 的 HTML 文 档 ， 如 下 图 所 示 。 


[Ea lejlEd 
文件 严 ) ”编辑 人 于) 查看 名 前 往 @) ”书签 包 ) 帮助 山 ) 
人 -人 祖 - 代 加 AQQeQ 
“内 容 | 索引 | 书 秘 | 搜索 自 定义 的 Qt 帮助 系统 
内 容 口 Xx 
Qt Assistant MManual 这 是 帮助 的 首页 ， 欢 迎 访 癌 wrgrwr yafeitinuzcotm 。 


二 

Qt Desiener Manual 
Qt Lineuist Nanual 
二 
二 





QIake Nanual @ 关于 我 们 
入 Documentati on 加 i 六 十 yafeiinuz 
导 - 关于 我 们 

加 入 我 们 全 








Dpen Pages 名 Xx 
Qt 帮助 系统 


四 、 创 建 .qhcp 文件 


要 想 使 Qt Assistant 只 显示 我 们 自己 的 帮助 文档 的 最 简单 的 方法 就 是 生成 帮助 集合 文件 

即 .qhc 文件 ， ee ,qhc 文件 ， 首 先 要 创 建 .qhcp 文件 。 在 documentation 文件 夹 中 新 建 
文本 文档 ， 对 其 进行 编辑 ， 最 后 另存 为 myHelp.qhcp ， 注 意 后 组 为 .qhcp 。 这 里 还 要 创建 一 
个 名 为 about.txt 的 文本 文件 ， 在 其 中 输入 一 些 该 帮助 的 说 明 信 息 ， 作 为 QtAssistant 的 About 
菜单 的 显示 内 容 。 myHelp.qhcp 文件 的 内 容 如 下 : 


<?xml1 version="1.0"encoding="GB2312"?> 
<QHelpCollectionpProjectversion="1.0"> 
<assistant> 
<title> 我 的 帮助 系统 </title> 
<applicationIcon>images/yafeilinux.png</applicationIcon> 
<cacheDirectory>cache/myHelp</cacheDirectory> 
<homePage>qthelp://yafeilinux.myHelp/doc/index.html</homePage> 
<startPage>qthelp://yafeilinux.myHelp/doc/index.html</startPage> 
<aboutMenuText> 

<text> 关 于 该 帮助 </text> 
</aboutMenuText> 
<aboutDialog> 

<file>./about.txt</file> 

<icon>images/yafeilinux.png</icon> 
</aboutDialog> 
<enableDocumentationManager>false</enableDocumentationManager> 
<enableAddressBar>false</enableAddressBar> 
<enableFilterFunctionality>false</enableFilterFunctionality> 
</assistant> 
<docETLes> 
<generate> 

<file> 

<input>myHelp.qhp</input> 
<output>myHelp.qch</output> 

</file> 
</generate> 
<register> 

<file>myHelp.qch</file> 
</register> 
“AdOCEILes> 
</QHelpcollectionProject> 


在 assistant 标签 中 是 对 Qt Assistant 的 外 观 和 功能 的 定制 ， 其 中 设置 0 、 图 标 、 缓 存 目 
录 、 主 页 、 起 始 页 、About 菜 单 文本 、 关 于 对 话 框 的 内 容 和 图 标 等 ， 还 关闭 了 一 些 没 有 用 的 功 
能 。 对 于 缓存 目录 cacheDirectory ， 是 进行 全 文 检 索 等 操作 时 缓存 By pe 。 对 于 
主页 homepage 和 起 始 页 startpage ， 这 里 使 用 了 第 二 步 中 提 到 的 Qt Assistant 的 页 面 的 URL ， 
这 个 URL 由 qthelp:// 开始 ， 然 后 是 在 .qhp 文件 中 设置 的 命名 空间 ， 然 后 是 虚拟 文件 夹 ， 最 
后 是 具体 的 HTML 文 件 名 。 因 为 Qt Assistant 可 以 添加 或 者 删除 文档 来 为 多 个 应 用 程序 提供 帮 
助 ， 但 是 这 里 只 是 为 一 个 应 用 程序 提供 帮助 ， 并 且 不 希望 删除 我 们 的 文档 ， la 禁用 了 文档 
管理 器 documentation manager ; eon 文档 集 很 小 ， 而 且 只 有 一 个 过 滤器 部 分 ， 所 以 也 

关闭 了 地 址 栏 address bar 和 过 滤器 功能 filter functionality ° 


在 前 面 第 三 步 中 我 们 已 经 生成 了 ,gch 文件 并 且 在 Qt Assistant 中 进行 了 注册 ， 但 那 只 是 为 了 
测试 文件 是 否 可 用 ， 其 实 完全 可 以 跳 过 第 三 步 ， 因 为 在 这 里 的 docFiles 标签 中 就 完成 了 第 三 
步 的 操作 。 不 过 与 第 三 步 不 同 的 是 ， 第 三 步 是 在 默认 的 集合 文件 中 注册 的 ， 而 这 里 是 在 我 们 
自己 的 集合 文件 中 注册 的 。 


五 、 生 成 .qhc 文件 


qcollectiongenerator myHelp.qhcp -omyHelp.qhc 


输出 结果 如 下 图 所 示 。 


DOWS\sy st en -DTx 


E:smowWhatsThisNdocumentation>dcollectiongenekatoFr myHelp.ghcp -o myvHelp.dhc 
Reading collection config file... 

Generating help for myHelp.qhp... 

Building up file structure... 

Insert custom filters... 

Insert help data for filter section 1 of 12... 

Insert files... 

Insert contents... 

Insert indices... 

Documentation successfully generated. 


E: myWhatsThis ocumentation>®, 





为 了 测试 我 们 定制 的 QtAssistant， 可 以 在 输入 如 下 命令 : 


assistant -CollectionFile myHelp.qhc 


这 里 在 运行 Qt Assistant 时 指定 了 集合 文件 为 我 们 自己 的 .qhc 文件 ， 所 以 运行 后 只 会 显示 我 
们 自己 的 HTML 文 档 。 可 以 看 到 ， 现 在 QtAssistant 的 图 标 也 更 改 了 ， 打 开 “Help” 菜 单 中 的 “关于 
该 帮助 "菜单 ， 这 里 是 前 面 添加 的 about.txt 文件 的 内 容 ， 效 果 如 下 图 所 示 。 
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4- 我 的 帮助 系统 


次 件 侍 ) ”编辑 下 查看 以) 前 往 {@) 


-多 - 借 回国 虽 
i 索引 | 书签 | 搜索 | 自 定义 的 Qt 帮助 系统 


盏 我 的 才 且 一 一 这 是 帮助 的 首页 ， 欢 迎 访问 warwr yafeiinux com 。 
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六 、 在 程序 中 启动 Qt Assistant 


这 里 先 要 将 Qt 安装 目录 的 bin 目录 中 的 assistant.exe 程序 复制 到 我 们 项 目 目 录 

的 documentation 目录 中 。 为 了 启动 Qt Assistant， 先 要 创建 了 一 个 Assistant 类 。 首 先 向 项 
目 中 添加 新 文件 ， 模 板 选择 C++ Class， 类 名 为 Assistant ， 基 类 不 填写 ， 类 型 信息 选择 无 。 
然后 将 assistant.h 文件 更 改 如 下 : 


#ifndef ASSISTANT_H 
#define ASSISTANT_H 
#include <QtCore/QString> 
Class QProcess ; 

class Assistant 


public: 

Assistant(); 

~Assistant(); 

void showDocumentation(const QString &file); 
private:: 

bool startAssistant(); 

QProcess *proc; 


}; 
#endif // ASSISTANT_H 


在 Assistant 类 中 主要 是 使 用 Qprocess 类 创建 一 个 进程 来 启动 Qt Assistant。 下 面 
是 assistant.cpp 文件 的 内 容 : 


358 


#include <QtCore/QByteArray> 
#include <QtCore/QProcess> 
#include <QtGui/QMessageBox> 
#include "assistant.h" 
Assistant::Assistant() 


: proc(0) 
{ 
} 
Assistant::~Assistant() 
If (proc && proc- >state() == QProcess::Running) { 
// 试图 终止 进程 


proc->terminate( ); 
proc->waitForFinished(3000); 


De 
// 销毁 proc 
delete proc ; 
} 
// 显示 文档 


void Assistant::showDocumentation(const QString &page) 


If (!startAssistant()) 

returm, 
QByteArray ba("SetSsource "); 
ba.append("qthelp://yafeilinux.myHelp/doc/"); 
proc->write(ba + page.toLocal8Bit() + '\n'); 


// 启动 Qt Assistant 
bool Assistant::startAssistant() 
{ 
// 如 果 没 有 创建 进程 ， 则 新 创建 一 个 
if (!proc) 
proc = new QProcess( ); 
// 如 果 进 程 没 有 运行 ， 则 运行 assistant， 并 添加 参数 
if (proc->state() != es { 
QString app = QLatiniString("../mywhatsThis/documentation/assistant.exe"); 
QStringList args; 
args << QLatiniString("-collectionFile") 
<< QLatiniString("../mywhatsThis/documentation/myHelp.qhc"); 
proc->start(app, args); 
if (!proc->waitForStarted()) { 
QMessageBox: :critical(90, QObject::tr("my help"), 
QObject::tr("Unable to launch Qt Assistant (%1)").arg(app)); 
return false; 
} 
} 


return true; 


在 startAssistant() 函数 中 使 用 Qprocess 创建 了 一 个 进程 来 启动 Qt Assistant， 这 里 使 用 了 
令 行 参数 来 使 用 帮助 集合 文件 ， 对 于 assistant.exe 和 myHelp.qhc 都 使 用 了 相对 地 址 ; 
在 showDocumentation() 、 定 有 具体 的 页 面 作 为 参数 来 使 Qt Assistant 显 示 指 定 的 页 

面 ; 在 析 构 函数 中 ， 如 果 进 程 还 在 运行 ， 则 终止 进程 ， 最 后 销毁 了 进程 指针 。 


下 面 来 使 用 Assistant 类 来 启动 Qt Assistant。 在 mainwindow.h 文件 中 先 添 加 前 置 声明 : 


class Assistant; 


再 添加 private 对 象 指针 声明 : 


Assistant *assistant; 


然后 添加 一 个 私有 模 : 


private Slots : 
void startAssistant(); 


和 en me 文件 中 进行 更 改 。 添 加 头 文件 包含 #include "assistant.h" ， 然 后 在 
构造 函数 中 添加 如 下 代码 : 


QAction *help = new QAction("help",this); 
ui->mainToolBar->addAction(help); 

connect(help, SIGNAL(triggered()), this, SLOT(startAssistant())); 
// 创建 Assistant 对 象 

assistant = new Assistant; 


这 里 创建 了 一 个 “help” 动 作 ， 并 将 它 添加 到 了 工具 栏 中 ， 可 以 使 用 该 动作 启动 QtAssistant。 下 
面 是 startAssistant() 槽 的 定义 : 


void Mainwindow: :startAssistant() 
// 按 下 help” 按 钮 ， 运 行 Qt Assistant， 显 示 index.html 页 面 


assistant->showDocumentation("index.html"); 


} 


最 后 在 析 构 函数 中 销毁 assistant 指针 ， 即 在 Mainwindow: :~MainWindow() 函数 中 添加 如 下 代 
码 : 


// 销 锚 assistant 
delete assistant; 


现在 运行 程序 ， 按 下 工具 栏 上 的 “help” 动 作 ， 就 可 以 启动 Qt Assistant 了 。 这 里 还 要 提示 一 
十， 如 果 要 发 布 该 程序 ， 那么 需要 将 documentation 目 录 复 制 到 发 布 目录 中 ， 这 时 运行 程序 。 


使 用 Qt 定制 帮助 系统 ， 可 以 制作 功能 强大 的 上 下 文 相关 的 帮助 文档 ， 而 对 于 一 个 优秀 的 软件 
而 言 ， 帮 助 菜单 是 必须 有 的 。 


涉及 到 的 代码 


第 48 篇 进 阶 〈 八 ) 3D 绘 图 简介 


导语 


OpenGL 是 一 个 跨 平 台 的 用 来 泻 染 3D 图 形 的 标准 API。 在 Qt 中 提供 了 QtopenGL 模块 ， 从 而 很 
轻松 地 实现 了 在 Qt 应 用 程序 中 使 用 DpenGL， 这 主要 是 在 QGLwidget 类 中 完成 的 。 因 为 3D 绘 

图 涉及 到 了 专业 方面 的 内 容 ， 我 们 下 面 只 是 讲解 最 简单 的 使 用 ， 向 大 家 演示 在 Qt 中 如 何 显示 

3D 图 形 。 如 果 大 家 想 深入 学 习 openGL 绘 图 ， 可 以 查看 网 上 比较 经 典 的 nehe 的 OpenGL 教 程 ， 
为 了 方便 大 家 下 载 ， 我 们 在 网 站 上 提供 了 下 载 连接 。 


环境 : Windows Xp + Qt 4.8.5+QtCreator2.8.0 


目 系 


。 一 、 绘 制 简单 的 图 形 
e。 二 、 添 加 颜色 
。 三 、 实 现 3D 效 果 


正文 
一 、 绘 制 简单 的 图 形 


QGLwidget 类 是 一 个 用 来 泻 当 OpenGL 图 形 的 部 件 ， 它 提供 了 在 Qt 应 用 程序 中 显示 OpenGL 图 
形 的 功能 。 我 们 只 需要 继承 该 类 ， 然 后 像 使 用 其 他 Qwidget 部 件 一 样 来 使 用 
它 。 QGLwidget 提供 了 三 个 虚 函 数 ， 可 以 在 子 类 中 通过 重新 实现 它们 来 执行 典型 的 OpenGL 任 
务 : 
e。 initialize6L() : 设置 OpenGL 泻 娄 环 境 ， 定 义 显 示 列 表 等 。 该 函数 只 在 第 一 次 调 
用 resizeGL() 或 paintGL( ) 前 被 调用 一 次 ; 
e resizeGL() : 设置 OpenGL 的 视 口 、 投 影 等 。 每 次 部 件 改变 大 小 时 都 会 调用 该 函数 ; 
e。 paintGL() : 泻 染 DOpenGL 场 景 。 每 当 部 件 需 要 更 新 时 都 会 调用 该 函数 。 


下 面 先 来 看 一 个 简单 的 例子 。 


1 新 建 空 的 Qt 项 目 ， 项 目 名 称 为 myopenGL ， 完 成 后 向 项 目 中 添加 新 的 C++ Class， 类 名 
为 MyGLwidget ， 基 类 修改 为 QGLwidget ， 类 型 信息 选择 “继承 自 Qwidget ”。 


2 ' 完成 后 打开 myopenGL.pro ， 添 加 一 行 代码 : 


QT += opengl 


然后 保存 该 文件 。 


3 打开 myglwidget.h 文件 ， 添 加 函数 声明 : 


protected : 
void initializeGeE(),; 
vondresazeGe(aunte Ww amet) 
void paintGL( ) ， 


4 再 到 myglwidget.cpp 文件 中 先 添加 头 文 件 包含 : 


#include <GL/glu.h> 


然后 添加 这 三 个 函数 的 定义 : 


void MyGLWidget::initializeGL() 

{ 
glClearColor(00. .0.0 ° 00 0.0) 
glShadeModel(GL_SMOOTH); 
glClearDepth(1.0); 
glEnable(GL_DEPTH_TEST); 

} 


glclearcolor() 函数 用 来 设置 清除 屏幕 时 使 用 的 颜色 ， 其 四 个 参数 分 别 用 来 设置 红 、 绿 、 蓝 
项 色 分 量 和 Alpha 值 ， 它 们 的 取 值 范围 都 是 0.0 到 1.0， 这 里 四 个 参数 都 为 0， 表 示 纯 黑色 。 然 后 
设置 了 阴影 平滑 (smooth shading) ， 这 样 可 以 使 色彩 和 光照 更 加 精细 。 最 后 设置 了 深度 组 
存 和 启用 深度 测试 ， 用 来 记录 图 形 在 屏幕 内 的 深度 值 。 


void MyGLWidget::resizeGL(int w, int h) 

{ 
glViewport(0, 0, (GLint)w, (GLint)h); 
glMatrixMode(GL_PROJECTION); 
glLoadIdentity(); 
gluPerspective(45.0, (GLfloat)w/(GLfloat)h, 0.1, 100.0); 
glMatrixMode(GL_MODELVIEW); 
glLoadIdentity(); 


glViewport() 驾 数 用 来 设置 视 口 的 大 小 。 然 后 使 用 glMatrixMode() 设置 了 投影 矩阵 ， 投 影 矩 
阵 用 来 为 场景 增加 ， 后 面 使 用 了 glLoadIdentity() 重 置 投影 矩阵 ， 这样 可 以 将 投影 矩阵 恢复 
到 初始 状态 。 gluperspective() 用 来 设置 投影 矩阵 ， 这 里 设置 视角 为 45 度 ， 纵 横 比 为 窗口 的 
纵横 比 ， 最 近 的 位 置 为 0.1， 最 远 的 位 置 为 100， 这 两 个 值 是 场景 中 所 能 绘制 的 深度 的 临界 
值 。 大 家 可 以 想象 ， 离 我 们 眼睛 比较 近 的 东西 看 起 来 比较 大 ， 而 比较 远 的 东西 看 起 来 就 比较 
小 。 最 后 设置 并 重 置 了 模型 视图 矩阵 。 


void MyGLWidget::paintGL() 

{ 
glClear (GL_COLOR_ BUFFER_BIT | GL_DEPTH_BUFFER_BIT); 
glLoadIdentity( ); 
// 绘制 三 角形 
glTranslatef(-2.0, 0.0, -6.0); 
glBegin(GL_ TRIANGLES); 
glVertex3f(0.0, 1.0, 0.0); 
glVertex3f(-1.0, -1.0, 0.0); 
glVertex3f(1.0, -1.0, 0.0); 
glEend( ); 
// 绘制 四 边 天 
人 0 0 0 
glBegin(GL_QUADS); 
glVertex3f(-1.0, 1.0, 0.0); 
glVertex3f(1.0, 1.0, 0.0); 
glVertex3f(1.0, -1.0, 0.0); 
glVertex3f(-1.0, -1.0, 0.0); 
glEend(); 








在 开始 绘制 以 前 ， 先 要 使 用 glClear() 浓 青 除 屏幕 和 深度 缕 存 。 然 后 重 置 了 模型 视图 和 矩阵， 这 
样 便 将 当前 点 移动 到 了 窗口 的 中 心 ， 现 在 窗口 中 心 即 为 坐标 原点 ，X 轴 从 左 到 右 ，Y 轴 从 下 到 
上 ，Z 轴 从 里 到 外 。 完 成 这 两 步 以 后 就 可 以 进行 图 形 的 绘制 了 ， 在 图 形 绘制 开始 时 ， 一 般 会 使 
用 glTranslatef() 来 移动 坐标 原点 ， 它 是 相对 于 当前 点 来 移动 的 ， 比 如 这 里 先 将 坐标 原点 左 
移 2.0， 向 里 移 6.0， 然 后 绘制 了 三 角形 (TRIANGLES) 。 绘 制 从 glBegin() 开始 ， 
到 glEnd() 结束 ， 使 用 glvertex3f() 来 设置 各 个 顶点 的 坐标 ， 顶 点 的 绘制 顺序 可 以 是 顺 时 
针 ， 也 可 以 是 逆 时 针 。 要 注意 逆 时 针 绘 rion ， 而 顺 时 针 绘 制 出 来 的 是 反面 ， 这 一 
点 在 后 面 的 纹理 贴图 部 分 会 显示 出 来 。 当 绘制 完 三 角形 以 后 ， 又 将 原点 相对 于 当前 点 向 右 移 
动 了 4.0， 然 后 es 


5 .最 后 再 向 项 目 中 添加 main.cpp 文件 ， 更 改 内容 如 下 : 


#include <QApplication> 
#include "myglwidget.h" 
ntmaan(ant ardge cnarm “argv ly 
{ 

QApplication app(argc,argv); 

MyGLWidget w; 

w.resize(400, 300); 

w. show( ); 

return app.exec(); 


现在 运行 程序 ， 效 果 如 下 图 所 示 。 
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可 以 看 到 ， 在 Qt 中 只 需要 实现 这 三 个 函数 就 可 以 进行 OpenGL 绘 图 了 。 
二 、 添 加 颜色 


上 面 的 例子 中 图 形 都 是 白色 的 ， 可 以 使 用 glcolor3f() 函数 来 设置 给 ee 
个 参数 用 来 指定 RGB ( 红 绿 蓝 ) 颜色 分 量 ， 取 值 范围 为 0.0 到 1.0。 我 们 可 以 在 绘制 一 个 顶点 
时 指定 使 用 的 颜色 ， 如 果 后 面 不 再 设置 其 他 颜色 ， 那 么 es 


下 面 我 们 将 图 形 的 绘制 代码 更 改 如 下 


void MyGLWidget::paintGL() 

{ 
glClear(GL_COLOR_ BUFFER_BIT | GL_DEPTH_BUFFER_BIT); 
glLoadIidentity(); 
glTranslatef(-2.0, 0.0, -6.0); 
glBegin(GL_TRIANGLES); 
glColor3f(1.0, 0.0, 0.0); 
glVertex3f(0.0, 1.0, 0.0); 
glColor3f(0.0, 1.0, 0.0); 
glVertex3f(-1.0, -1.0, 0.0); 
glColor3f(0.0. 0.0°%1.0), 
glVertex3f(1.0, -1.0, 0.0); 
glEnd( ); 
glTranslatef(4.0, 0.0, 0.0); 
glBegin(GL_QUADS); 
gLCoLlors (L010 0.0) 
glVertex3f(-=1.0, 1.0, 0.0); 
glVertex3f(1.0, 1.0, 000)7 
glVertex3f(1.0, -1.0, ‘0.0); 
glVertex3f(-1.0, -1.0, 0.0); 
glEnd( ); 








可 以 看 到 三 角形 的 三 个 角 分 别 是 红色 、 绿 色 和 蓝 色 ， 而 正方 形 是 纯 黄色 的 。 如 下 图 所 示 。 





三 、 实 现 3D 效 果 


前 面 的 图 形 都 还 是 平面 图 形 ， 下 面 添加 代码 来 实现 三 维 立 体 效 果 。 将 程序 中 绘制 图 形 的 代码 
更 改 为 : 


void MyGLWidget: :paintGL( ) 
{ 
glClear(GL_COLOR_ BUFFER_BIT | GL_DEPTH_BUFFER_BIT); 
glLoadIdentity(); 
glTranslatef(0.0, 0.0, -6.0); 
glRotatef(45, 0.0, 1.0, 0.0); 
glBegin(GL_QUADS); 








glColor3f(1.0, 0.0, 0.0); 
gdlVertex3f (L107 1010)% 
glVertex3f(L.0 .1.0 1.0),; 
glVvertex3f(-2:0. 1.0 1.0). 
glVertex3f(-1.0, 1.0, 1.0); 


glColor3f(0.0, 1.0, 0.0); 
glVertex3f(1:07 1 0 17.0 
glVertex3f(1.0, -1.0, -1.0); 
glVertex3f(-1.0, -1.0, -1.0); 
glVertex3f(=1.0 .1.0 10 


glColor3f(0.0, 0.0, 1.0); 
glVertex3f(107 .1.0 .1.0 
glVertex3f(-1.0, 1.0, 1.0); 
glVertex3f(= T1007 10 10) 
glVertex3f(1.07 1.0 .1.0 
glEnd( ); 


这 里 使 用 了 glRotatef(angle，x，y，z) 函数 来 对 坐标 轴 进 行 旋转 ， 它 的 第 一 个 参数 是 旋转 的 
角度 ， 后 面 三 个 参数 用 来 确定 旋转 轴 向 量 。 旋 转轴 经 过 原点 ， 指 向 (x,y,z) 点 。 图 形 的 旋转 
满足 右手 定 则 ， 就 是 用 右手 握 住 旋转 轴 ， 大 拇指 指向 旋转 轴 所 指 的 方向 ， 然 后 其 他 四 个 手指 
所 指 的 方向 就 是 要 旋转 的 方向 。 再 往 下 面 ， 分 别 绘制 了 三 个 正方 形 作为 正方 体 的 三 个 面 ， 大 
家 还 可 以 再 补充 上 其 他 几 个 面 。 运 行程 序 ， 效 果 如 下 图 所 示 。 
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这 一 节 只 是 向 大 家 简单 演示 了 如 何在 Qt 中 进行 openGL 编 程 来 实现 3D 绘 图 ， 目 的 只 是 让 大 家 看 
到 在 Qt 中 进行 3D 绘 图 是 非常 简单 的 。 如 果 想 进一步 应 实现 更 炫 酷 的 效果 ， 就 需要 拥有 openGL 
的 专业 知识 了 。 


涉及 到 的 代码 
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导语 


Qt 对 于 音频 视频 的 播放 和 控制 等 多 媒体 应 用 提供 了 强大 的 支持 。 要 想 使 计算 机 发 出 响声 ， 最 
简单 的 方法 是 调用 QApplication: :beep() 静态 函数 ; 而 对 于 简单 的 声音 播放 ， 可 以 使 用 
QSound 类 ; 对 于 简单 的 动画 播放 ， 可 以 使 用 QMovie 类 ; 要 想 对 音频 视频 实现 更 多 的 控制 ， 
可 以 使 用 Phonon 多 媒体 框架 ; 而 对 于 音频 视频 底层 的 控制 ， 可 以 使 用 QtMultimedia 模块 。 


虽然 在 Qt 5 中 已 经 已 经 放弃 了 Phonon， 但 是 使 用 Qt 4 时 ，Phonon 还 是 一 个 很 好 的 选择 ， 所 以 
这 里 我 们 也 对 其 进行 了 简单 介绍 。 


环境 : Windows Xp + Qt 4.8.5+QtCreator2.8.0 


目 系 


。 一 、 使 用 QSound 播 放声 音 
。 二 、Phonon 简介 

。 三 、 使 用 Phonon 播 放 音 频 
e。 四 、 使 用 Phonon 播 放 视 频 


正文 

一 、 使 用 QSound 播 放声 音 

1 新 建 Qt Gui 应 用 ， 名 称 为 mysound ， 类 名 Mainwindow 和 基 类 QMainwindow 保持 默认 即 可 。 
2 完成 后 在 mainwindow.cpp 文件 中 添加 头 文件 #include <QSound> ， 然后 在 构造 函数 中 添加 
如 下 一 行 代码 : 


QSound: :play("../mySound/sound.wav"); 


这 时 运行 程序 就 可 以 播放 指定 的 音频 文件 了 ， 注 意 这 里 将 音频 文件 放 在 了 项 目 目 录 中 。 因 为 
现在 Qsound 并 不 支持 资源 文件 ， 所 以 音频 文件 必须 要 放 在 程序 外 面 。 除 了 简单 的 使 用 静态 函 
数 进行 播放 外 ， 也 可 以 先 构建 一 个 QsSound 对 象 ， 然 后 再 调用 play() 槽 进行 播放 ， 可 以 使 

用 stop() 槽 来 停止 声音 的 播放 ， 还 可 以 使 用 setLoops() 郊 数 设置 播放 重复 的 次 数 ， 如 果 设 
置 为 -1 表示 无 限 循环 。 


3 先 到 mainwindow.h 文件 中 添加 前 置 声明 classQSound; 然后 声 明 一 个 私有 对 象 : 


QSound *sound; 


再 到 mainwindow.cpp 文件 中 ， 将 构造 函数 里 添加 的 调用 play() 函数 的 代码 更 改 为 : 


sound = new QSound("../mySound/sound.wav", this); 


后 我 们 双击 mainwindow.ui 文件 进入 设计 模式 ， 向 界面 上 添加 两 个 Push Button 和 一 
个 spin Box ， 并 将 两 个 按钮 的 文本 分 别 改 为 “播放 ”和 “停止 。 然 后 更 改 Spin Box 的 属性 


将 最 小 值 minimum 设置 为 -1， 将 当前 值 value 设 置 为 1。 最 后 分 别 转 到 两 个 按钮 的 clicked() 楼 
和 spin Box 的 valuechanged(int ) 档 ， 更 改 它们 的 内 容 如 下 : 


void Mainwindow: :oNn_pushButton_clicked() 
LE | a 

void Mainwindow: :on_pushButton 2_ clicked() 
: 0 


void MainwWindow: :on_spinBox_valueChanged(int value) 


sound->setLoops(value); 


} 


4 现在 运行 程序 ， 可 以 设置 播放 的 次 数 ， 然 后 使 用 开始 按钮 进行 播放 ， 使 用 停止 按钮 来 停止 
播放 了 。 要 说 明 一 下 ， 在 Windows 平 台 上 ， 如 果 设 置 了 循环 次 数 ， 那 么 stop() 函数 无 法 立即 
停止 播放 ， 需 要 完成 当前 的 循环 才 可 以 停止 播放 。 


使 用 Qsound 可 以 实现 一 些 简短 的 声音 的 播放 ， 使 用 它 来 实现 单 击 按钮 或 者 其 1 
很 好 的 选择 。 根 据 平台 的 音频 设备 的 不 同 ， 如 果 使 用 Qsound 同时 播放 多 个 音频 文件 ， 那 么 

面 播放 的 声音 或 者 会 与 前 面 播放 的 声音 进行 混合 ， 或 者 会 停止 前 面 播放 的 声音 人 
平台 上 ， 新 播放 的 声音 会 停止 前 面 播放 的 声音 。 如 果 要 播放 其 他 格式 的 音频 文件 ， 或 者 需要 
对 播放 进行 更 多 的 控制 ， 那 么 就 需要 使 用 Phonon 多 媒体 框架 来 实现 了 。 


二 、Phonon 简介 


Phonon 包 含 三 个 基本 的 概念 : 媒体 对 象 (Media Objects) 、 汇 点 (Sinks) 和 路 径 

(Paths) 。 媒 体 对 象 是 Mediaobject 类 的 一 个 实例 ， 用 来 管理 媒体 源 ， 例 如 一 个 音乐 文件 ， 
它 提供 开始 、 停 止 和 暂停 等 简单 的 播放 控制 功能 ; 汇 点 用 来 从 Phonon 中 输出 媒体 ， 例 如 在 部 
件 上 泻 染 视频 或 者 将 音频 传送 到 声卡 ， 汇 点 通常 是 一 个 泻 汪 设备， 如 videowidget ; 路 径 用 来 
连接 Phonon 对 象 ， 例 如 连接 一 个 媒体 对 象 和 一 个 汇 点 ， 这 样 形成 的 关系 图 在 Phonon 中 被 称 为 
媒体 图 (mediagraph) 。 下 图 是 一 个 音频 流 的 媒体 图 : 
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视频 设备 


Video Device 


媒体 源 
Media Source 音频 设备 


(例如 myavi) Audio Device 





下 图 是 一 个 播放 带 有 声音 的 视频 文件 的 媒体 图 : 


加 一 
路 径 





Path 
媒体 源 
Media Source 本 
(例如 mymp3) 
多 媒体 功能 并 不 是 由 Phonon 本 身 实 现 的 ， 而 是 由 后 端 (也 常 被 称 为 引擎 ) 实现 的 ， 这 包含 了 


连接 、 管 理 和 驱动 底层 的 硬件 或 中 间 技 术 。 对 于 编程 人 员 来 说 ， ， 例如 
媒体 对 象 、 处 理 器 和 汇 点 ， 它 们 都 由 后 端 提 供 。 而 且 ， 后 端 还 负责 构建 媒体 图 ， 例 如 连接 各 


个 节点 。 


Qt 使 用 的 后 端 ， 在 Windows 上 是 DirectShow， 在 Mac 上 是 QuickTime， 在 Linux 上 有 是 
Gstreamer。 依 赖 于 底层 的 系统 ， 在 不 同 的 平台 上 所 提供 的 功能 会 有 所 不 同 。 后 端 可 以 显示 顶 
层 系统 的 信息 ， 可 以 获取 它 支 持 的 媒体 格式 ， 例 如 AVI、mp3 或 者 OGG 等 。 


三 、 使 用 Phonon 播 放 音 频 


当 播 放 音 频 时 ， 需 要 创建 一 个 媒体 对 象 ， 然 后 将 它 连 接 到 一 个 音频 输出 节点 ， 该 节点 
由 Audiooutput 类 提供 ， 它 用 来 将 音频 输 出 到 声 卡 ° 


1 新 建 Qt Gui 应 用 ， 名 称 为 myPhonon1 ， 类 名 Mainwindow 和 基 类 QMainwindow 保持 默认 即 
可 。 完 成 后 ， 在 项 目 文件 myPhononl.pro 中 添加 如 下 一 行 代码 : 


QT += phonon 


369 


然后 保存 该 文件 。 


2 再 到 mainwindow.cpp 文件 中 添加 头 文 件 包含 : 


#include <phonon> 
#include <QDebug> 
#include <QUr1> 


并 在 构造 函数 中 添加 如 下 代码 : 


Phonon: :Mediaobject *mediaobject = new Phonon::MediaObject(this); 
mediaobject->setCurrentSource(Phonon: :MediaSource("../myPhonon1i/mysong.mp3")); 

Phonon: :AudioOutput *audiooutput = new Phonon::Audiooutput(Phonon: :MusicCategory, this 
); 

Phonon: :Path path = Phonon::createPpath(mediaObject, audioOutput); 

media0bject->play(); 


Audiooutput 类 用 来 向 音频 输出 设备 发 送 数据 ， 音 频 输 出 需要 使 用 createpath() 有 函数 连接 到 
媒体 对 象 上 。 Audiooutput 提供 了 郊 数 来 控制 音量 的 大 小 ， 还 可 以 设置 静音 ， 而 且 Phonon 还 
使 用 AudioOutput 提 供 了 一 个 音量 控制 部 件 volumeslider 类 ， 它 是 Qwidget 的 子 类 。 另 外 ， 
Phonon 中 也 提供 了 播放 进度 滑 块 seekslider ， 该 类 也 是 QWidget 的 子 类 ， 它 需要 连接 到 媒体 
对 象 上 。 


3 往 源码 目录 中 添加 一 个 mysong.mp3 文件 ， 运 行程 序 就 可 以 自动 播放 了 。 不 过 ， 现 在 还 无 
法 进行 任何 的 控制 。 大 家 可 以 查看 《Qt 及 Qt Quick 开 发 实战 精 解 》 的 音乐 播放 器 实例 ， 那 是 
一 个 比较 完整 的 播放 器 例子 。 


四 、 使 用 Phonon 播 放 视 频 


1 新 建 Qt Gui 应 用 ， 项 目 名 称 为 myPhonon2 ， 基 类 选择 QWidget ， 类 名 为 Widget 。 完成 后 
先 到 项 目 文件 myPhonon2.pro 中 添加 代码 : 


QT += phonon 


然后 保存 该 文件 。 


2 . 播放 视频 ， 可 以 使 用 videowidget 类 ， 该 部 件 可 以 自动 选择 可 用 的 设备 来 播放 视 
频 。 Videowidget 并 不 会 播放 媒体 流 中 的 音频 ， 如 果 要 播放 视频 中 的 音频 ， 那 么 就 要 创建 一 
个 Audiooutput 节点 。 在 mainwindow.cpp 文件 中 添加 头 文件 包含 : 

#include <phonon> 

#include <QAction> 


#include <QVBoxLayout> 
#include <QToolBar> 


再 在 构造 函数 中 添加 如 下 代码 : 





Phonon: :Mediaobject *mediaobject = new Phonon: :Mediaobject(this)， 
Phonon: :Videowidget *videowidget = new Phonon::Videowidget(this); 
Phonon: :createPpath(mediaObject, videowidget); 
Phonon: :Audiooutput *audiooutput = new Phonon: :Audiooutput( 
Phonon: :VideoCategory, this); 
Phonon: :createPath(mediaobject，audiooutput ) ， 
mediaobject->setCcurrentSource(Phonon: :MediaSource( 
"../myPhonon2/myVideo .WMV")); 


// 创建 播放 进度 滑 块 
Phonon: :SeekSlider *seekSlider = new Phonon::SeekSlider( 
mediaObject, this); 


// 创建 工具 栏 包 念 了 播放 、 暂 停 和 停止 动 以 
QToolBar *toolBar = new QToolBar (this); 
QAction *playAction = new QAction(style()->standardIcon(QStyle::SP_MediaPlay)，tr(" 播 放 " 
), this); 

connect(playAction, SIGNAL(triggered()), mediaOobject, SLOoT(play())); 

QAction *pauseAction = new QAction(style()->standardIcon(QStyle::SP_Mediapause), tr(" 地 
tu) lS; 

connect(pauseAction, SIGNAL(triggered()), mediaOobject, SLOT(pause())); 

QAction *stopAction = new QAction(style()->standardIcon(QStyle::SP_MediaStop)，tr(" 停 止 " 
), this); 

connect(stopAction, SIGNAL(triggered()), mediaObject, SLOT(stop())); 

Phonon: :VolumeSlider *volumeSlider = new Phonon::VolumeSlider(audioOutput, this); 
volumeSlider->setSizePolicy(QSizePolicy::Maximum, QSizePolicy: :Maximum); 
toolBar->addAction(playAction); 

toolBar->addAction(pauseAction); 

toolBar->addAction(stopAction); 

toolBar->addwidget(volumeSlider); 





// 创建 布局 管理 器 ， 将 各 个 部 件 都 添加 到 布局 管理 器 中 

QVBoxLayout *mainLayout = new QVBoxLayout; 
videowWidget->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding); 
mainLayout->addwidget (videowidget ) ; 

mainLayout->addwidget(seekSlider); 

mainLayout->addwidget(toolBar); 

setLayout (mainLayout); 


[i 


这 里 创建 了 两 个 路 径 ， 分 别 用 于 视频 流 和 音频 流 。 创 建 videowidget 时 不 需要 指定 类 别 ， 它 会 
自动 指定 为 videocategory 类 别 ， 我 们 需要 做 的 只 是 确保 Audiooutput 也 在 同一 个 类 别 中 。 
Phonon 中 的 seekslider 类 提供 了 一 个 滑 块 来 定位 媒体 流 ， 只 要 与 媒体 对 象 Mediaobject 连接 
后 ， 该 部 件 就 可 以 自动 和 媒体 流 的 播放 进度 同步 起 来 ， oo 

联 。Phonon 中 的 volumeslider 部 件 提 供 了 一 个 用 来 控制 音频 输出 设备 音量 的 滑 块 ， 该 滑 块 还 
会 默认 显示 一 个 可 以 设置 静音 的 图 标 ， aed setMuteVisible() 来 移 除 。 


3 :需要 将 一 个 myvideo.wMv 的 视频 文件 复制 到 源码 目录 ， 然 后 运行 程序 ， 效 果 如 下 图 所 示 。 


第 49 篇 进 阶 ( 九 ) 多 


Wl ¥idget 


pl 


结语 


媒体 应 用 简介 





Movie 类 是 一 个 使 用 QImageReader 来 播放 动画 的 便捷 类 。 该 类 用 来 显示 没有 声音 的 简单 动 

画 ， 主 要 支持 GIF 和 MNG 格 式 的 文件 ; 在 Qt 4.6 中 新 加 入 了 QtMultimedia 模块 来 提供 一 些 底 
层 的 多 媒体 功能 ， 比 如 音频 的 采集 和 回放 、 频 谱 分 析 、 操 作 视 频 帧 等 。 关 于 这 两 个 类 的 使 

用 ， 可 以 参考 《Qt Creator 快速 入 门 》 的 第 13 章 ， 进 一 步 学 习 Phonon 的 内 容 ， 可 以 参考 第 14 


- 立 - 


早 oo 
涉及 到 的 源码 : 


。 myPhonon1.rar 
。 myPhonon2.rar 
e。 mySound.rar 
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第 二 部 分 进入 Qt 5 的 世界 


第 二 部 分 进入 Qt 5 的 世界 


(基于 Qt 5， 主 要 讲解 Quick Qml 编 程 ) 


QtQulck 
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从 Qt 4 到 Qt5 (一 ) Qt 5.2 安 装 、 程 序 迁 移 和 发 布 


导语 


Rs hs she Qt 5.2 是 官方 一 再 强调 开发 Android 要 使 用 
的 版 本 。 经 过 了 近 一 年 的 等 待 ， 这 次 终于 可 以 完成 凤 愿 ， 继 续 更 新 Qt 系列 教程 了 。 在 后 面 的 
教程 中 会 尽量 涉及 大 家 经 常 问 到 、 0 问题 ， 也 会 尽 可 能 的 把 最 新 的 技术 和 最 炫 的 界 
面 效 果 展 示 给 大 家 。 


这 里 也 请 大 家 把 心态 放 平 稳 一 些 ， 0 家 学 习 的 心态 ， 也 是 说 我 写 教 程 的 心态 。 通 过 这 几 
年 的 经 历 ， 我 发 现 ， 凡 事 不 能 急功近利 ， 只 有 平常 心 才能 出 真知 ， 只 有 用 最 朴实 〈《 有 时 候 可 
能 显得 不 专业 ) Sd 才 会 让 更 多 人 容易 读 懂 ， 才 会 得 到 更 多 人 的 赞 
誉 。 这 里 不 得 不 说 ， 写 教程 只 是 我 在 业余 时 间 做 的 事情 ， 我 的 技术 水 平 也 没有 一 些 网 友 想 的 

么 牛 又 ， 之 所 以 还 要 一 直 写 下 去 ， 是 因为 有 那么 多 网 友 的 支持 和 肯定 。 也 是 在 今天 ， 我 得 
(Qt Great 入 忆 和 人家 ，， 这 距 该 书 出 版 还 不 到 一 年 半 的 时 间 。 这 里 再 次 谢谢 那些 
支持 我 的 朋友 ， 我 会 通过 更 好 的 教程 和 开源 作品 来 感谢 大 家 一 直 以 来 的 支持 ! 


环境 : Windows 7 + Qt 5.2.0+QtCreator 3.0 


目录 


。 一 、 软 件 安装 
。 二 、 运 行 一 个 Qt 4 程序 
e 三 、 发 布 Qt 5 程序 


内 容 概要 


本 节 讲 述 的 内 容 主要 有 三 点 

第 一 ， 一 般 的 Qt 4 程序 要 在 Qt 5 上 编译 ， 需 要 注意 : 

1 将 main.cpp 文件 中 的 #include <QtGui/QApplication> 修改 为 #include <QApplication> 
2 .在 .pro 项 目 文件 中 添加 : greaterThan(QT_MAJOR VERSION, 4): QT += widgets 

第 二 ， 在 Qt 5 中 设置 应 用 程序 图 标 ， 需 要 注意 : 

1 将 .ico 图 标 文 件 放 到 项 目 源码 目录 


2 .在 .pro 文件 中 添加 。 RC_ICONS = myico.ico ( myico,Ico 就 是 自己 图 标 文件 的 名 字 ) 





第 三 ， 发 布 Qt 5 程序 时 ， 除 了 必要 的 dl 文件 以 外 ， 还 需要 将 plugins 中 的 platforms 目录 复制 
过 来 ， 而 里 面 只 要 保留 qminimal.dl1 和 qwindows.dll 两 个 文件 即 可 。 


正文 
一 、 软 件 安装 


“下载 并 安装 Qt 5.2 


首先 到 Qt 官方 下 载 页 面 : http://download.qt-project.org/development_releases/qt/5.2/5.2.0- 
beta1/ 


因为 是 在 Windows 下 ， 所 以 下 载 含 有 Android 库 的 Windows 版 本 ， 具 体 文件 是 : 


qt-windows-opensource-5.2.0-betal-android-x86-win32-offline.exe 


个 安装 包 中 已 经 包含 了 所 有 需要 的 工具 (例如 最 新 版 的 Qt Creator 3.0， 当 然 要 开发 Android 
是 需要 自己 添加 文件 的 ) ， 我 们 只 需要 下 载 这 一 个 文件 即 可 。 

载 完成 后 ， 双 击 运行 。 这 里 一 般 不 需要 做 任何 设置 ， 直 接点 击 下 一 步 直到 软件 安装 完成 。 
后 便 自 动 打开 了 我 们 期 盼 已 久 的 Qt Creator 3.0 欢 迎 界面 ， 如 下 图 所 示 。 


Search in Tutorials 





State { 
name: "state2"™ 


目 PropertyChanges { 


taryget: icon 
Pg 把 x: bottomLeftRect.x 
Y: bottomLeftRect.Y 
} 
} 





Building and Running an Creating a Qt Quick 


New to Qt? 

Tags: qt creator build compile Tags: qt quick qmlstates transitions 
Learn how to develop your qt creator 
own applications and 
explore Qt Creator. 
加 at Gui Application 
加 Mobile Qt Application 





| Get started Now | 





Creates a Qt application 


| Online Community Ke Whedon 


NM Blozs 


@ User Guide 





[晴信 - 按 入 以 定位 (Ctr|+K) 





可 以 看 到 ， 欢 迎 界面 和 以 前 布局 有 了 一 些 变动 ， 更 加 清晰 明了 。 但 总 体 来 说 ， 整 个 界面 及 内 
容 没 有 什么 变化 。 


从 Qt 4 到 Qt 5 (一 ) Qt 5.2 安 装 、 程 序 迁 移 和 发 布 


2 运行 一 个 例子 


我 们 上 点击“ 示例 ”， 然 后 选择 一 个 例子 先 来 运行 一 下 ， 比 如 这 里 选择 Flickr View Example， 这 时 
会 打开 该 程序 并 跳 转 到 其 帮助 文档 界面 ， 如 下 图 所 示 。 


文件 (月 ”编辑 (E) ”构建 (8) 调式 (D) 分 析 (A) 工具 (T) ”控件 (W) ”帮助 (H) 
[= =-» 涂 泉 小 加 Flicky View Exanple | QtWebKitExamples 5.2 = | 过 起 方式: 未 过 尖 
Db QtCreator Ma.. < 


b Actve Qt Flickr View Example 
b QDoc Manual 


pb QMake Manual 

b Qt Android Extr.. 

b Qt Assistant M... 

b Qt Bluetooth 

pb Qt Concurrent 

P Qt Core 

b Qt Designer M... 
Qt 5.2.0 Refere... 

b Qt Graphical Ef.. 

» Qt GUI flickr.,... 


Home TeTow Sinup Elew -Upload 
b Qt Help 


Qt5.2» QtWebKit Examples» Flickr View Example Qt 5.2.0 Reference Documentation 


Demonstrates how to embed a web view in a Qt Quick application 


The Flickr View Qt Quick example uses a WebView to browse the images from the C3 Flickr public RSS feed 


Explore / Interestingness / Last 7 Days 








Get more ntereating photos men tpe 1as1 7 dars 【TD 


Fiy over (EXPLORED menh you ) Yo ashe permer 
re etaoeordy Ts reperery yr 
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运行 该 程序 ， 效 果 如 下 图 所 示 。 


377 


EE flickview 


Fekr 








是 个 非常 漂亮 的 图 片 浏 览 程 序 ， 是 用 qml 编 写 的 ， 不 过 这 个 并 不 是 这 里 讲述 的 重点 ， 非 常 先 
Wi 
是 ，Qt 5 已 经 是 一 个 SDK 了 ， 它 包含 了 开发 所 需要 的 大 部 分 工具 ， 包 括 了 Qt Creator 和 
MinGW， 并 做 好 了 关联 设置 ， 所 以 我 们 可 以 看 到 ， 现 在 无 需 再 像 使 用 Qt 4.8 那 样 手 动 设 置 就 
可 以 直接 编译 运行 程序 。 


3 . 安装 调试 器 


我 们 选择 工具”->" 选 项 "菜单 项 ， 然 后 打开 “构建 和 运行 "页 面 中 的 构建 套件 ， 可 以 看 到 ， 这 里 已 
经 自动 检测 到 了 一 个 构建 套件 。 如 下 图 所 示 。 


从 Qt 4 到 Qt5 (一 ) Qt 5.2 安 装 、 程 序 迁 移 和 发 布 






















































































过 滤器 构建 和 运行 
闻 环境 全 概要 构建 套件 (Kit) Qt 版 本 | 编译 器 [ Debuggers I CHake 
三 | 文本 篇 神 委 添加 
4 自动 检测 
堪 FakeVim A Desktop Qt 5 2.0 Wn6y Fb1t CAA) 
@ i [而 除 
| [ 王 欧 让 
| 0 C++ 
AA Qt Quick 
| 四 mss | 
@ 调试 器 i 名 称 : Desktop Qt 5.2.0 MinGH 32bit E99 
| A tn 设备 类 型 [桌面 * 
0 设备 : [Lecal PC 便 面 类 型 的 吉 认 设备 ) |] [ Monaee | 
| 和 和 Sysroot : 浏览 ..， | 
本 控制 
| 号 Android 编译 器 : 。 |WinGW 4.8 32bit = | 
A 
ee 调试 器 : Fone 了 管理 | 
| 四 BR Qt 版 本 : [Qt 5.2.0 MinGW 32bit -| 「 管理 
| 国 设备 到 Qt mkspec: | 
| 忆 l raw ~ 
| [| 确定 || 取消 ”|| 应 用 

















不 过 ， 现 在 在 构建 套件 前 面 有 个 黄色 的 感叹 号 ， 将 光标 移动 到 上 面 可 以 看 到 提示 没有 设置 调 
试 器 。 如 下 图 所 示 。 


自动 检测 
[A pesktep Ot 5 2.0 WinGy 39brt (OM) 











一 二 
Desktop Qt 5.2.0 MinGW 32bit 


设备 类 型 : ” 训 面 
设备 : Local PC 
Sys Root 
编译 器 : MinGW 4.8 32bit 
| 调试 器 : No Debugger 
GDB server: 
Qt 版 本 : Qt 5.2.0 MinGW 32bit 
mkspec: 


root 
在 没有 调试 器 的 情况 下 ， 是 无 法 启动 调试 模式 的 。 这 里 ， 大 家 可 以 通过 手动 进行 添加 。 先 进 
入 Debuggers 标 签 页 ， 可 以 看 到 现在 这 里 还 没有 设置 调试 器 ， 点 击 右 侧 的 Add 按 钮 ， 添 加 一 个 
自 定义 的 调试 器 ，Name 修 改 为 gdb ，Path 选 择 Qt 5.2 安 装 目录 下 

的 tool->mingw48_32->bin 中 的 gdb 程序 ， 我 这 里 

是 c:\Qt\Qt5.2.0\Tools\mingw48_32\bin\gdb.exe ， 完 成 后 点 击 下 面 的 应 用 按钮 ， 效 果 如 下 图 所 
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tt 3 

过 二 器 构建 和 运行 

画 痪 站 [概要 | 构建 套件 it) | Qt 版 本 | 编译 器 Debuggers | Chake | 

所 | 文本 编 各 器 Name Path Type Add 

Auto-detected [|_ clone | 

ee 和 二 CNQt\Qt5.2.0\Toolsvmingw48_32\bin\gdb.exe GDB [Renove | 

QO C++ 

A Qt Quick 

区 并 ma5 | 

as | 

A tm 

辆 分 析 嘻 

国 N 版 本 | 

中 Android i 

@ BlackBerry Path: CiAQtAgt5.2.0AToolsmingw48_32Abinkgdb. exe 浏览 .. 

国 设备 | ABIs: |xB6-windows-msys-pe-unlknown 

展 | ra | 
EM EEaN = 局] | 











现在 回 到 构建 套件 标签 页 ， 可 以 看 到 调试 器 已 经 默认 选择 为 了 我 们 添加 的 gdp ， 而 且 以 前 的 
黄色 感叹 号 也 消失 了 。 


我 们 这 里 只 是 简单 介绍 了 一 下 构建 套件 的 设置 ， 至 于 如 何 添加 设置 Android 开 发 套件 ， 会 在 后 
面 专门 的 章节 进行 介绍 ， 这 里 就 不 再 讲解 。 


、 运 行 一 个 Qt 4 程序 


为 了 尽 可 能 演示 Qt 4 程序 在 Qt 5 编译 时 会 出 现 的 问题 ， 我 们 这 里 使 用 了 一 个 Windows Xp 下 面 
基于 Qt 4.7 创 建 的 Qt Gui 应 用 程序 。 这 一 节 的 目的 就 是 让 大 家 作为 参考 ， 如 果 你 也 遇 到 了 类 似 
的 情况 ， 那 么 可 以 这 样 来 解决 ， 如 果 没 有 遇 到 ， 则 可 以 直接 跳 过 相关 内 容 。 


1 编码 问题 


我 们 打开 现 有 的 Qt 4 版 本 的 helloworld 源码 目 ， ee helloworld.pro ws 
Creator 中 打开 该 项 目 ， 这 时 会 跳 转 到 项 目 模式 ， 进 行 项 目 配置 ， 也 就 是 选择 构建 套件 。 
Oo 


| ”编辑 器 | 代码 风格 | 依赖 关系 | 





Configure Project 
Qt Creator can use the following kits for project helloworld: 
The project helloworld is not yet configured. 
Qt Creator uses the kit Desktop Qt 5.2.0 MinGW 32bit to parse the project. 


同感 Desktop Qt 5.2.0 MinGW 32bit 


Import Build From... 


Create Android Kits 


onfigure Project 





国 ia 王 中国 j 荣 结果 因应 用 程序 多 十 | 用 下 坟 译 答 册 用 国 aowrs conso1: 用 





下 面 我 们 打开 项 目 文件 列表 中 的 hellopialog.cpp 文件 ， 因 为 这 里 有 一 行 中 文 注 释 ， 所 以 出 现 
了 "错误 : 无 法 用 "UTF-8”- 编 码 解码 ”hellodialog.cpp ”°。 无 法 编辑 。” 的 错误 提示 ， 这 是 因为 该 
文件 不 是 使 用 UTF-8 编 码 的 ， 而 其 中 的 中 文 无 法 使 用 UTF-8 自 动 解 码 造 成 的 。 为 了 使 中 文 可 以 
正常 显示 ， 并 且 以 后 不 再 出 现 该 错误 提示 ， 我 们 可 以 通过 下 面 的 方法 手动 来 将 文件 设置 为 
UTF-8 编 码 。 


首先 点 击 错误 提示 后 面 的 选择 编码 按钮 (也 可 以 使 用 “编辑 ”->" 选 择 编码 "菜单 项 ) ， 然 后 选 
择 GB18036/gb18930/ibm-1392/windows-54936 一 项 ， 最 后 点 击 按 编码 重新 载 入 按钮 。 如 下 图 所 
示 “。 


从 Qt 4 到 Qt 5 (一 ) Qt 5.2 安 装 、 程 序 迁 移 和 发 布 


六 


文件 (Pi 编辑 (E) ”构建 (8) ” 亩 试 (D) 分 析 (A) ”工具 MT) 控件 (W) ”帮助 (H) 


“SB: X 字 De HelloDislog: :HelloDialog (QWidget *) 
< eftowortd 错误 : 无 法 用 “UrF-8" 编 码 解 肥 “hellodi dlog cpp"。 无 法 编辑 。 
helloworld.pro 
4 路 Headers 1 #include "hellodialog.h" 
2 #include "ui hellodialog.h" 
Iih) hellodialog.h 3 


所 中 Sources HelloDialog: :HelloDialog (QWidget *parent) : 
加 hellodialog.cpp QDialog (parent), 


四 main.cpp 6 ui(new Ui::HelloDialog) 
“mt // Dopo?too 
; ， 上 
hellosia leg 9 Ui->setupUi (this); 


选择 编码 」 X 


太 








为 "hellodi alog. cpp "选择 编码 。 
以 下 编码 可 能 符合 : 





ISO-8859-13 / ibm-921_P100-1995 / ibm-921 / 8859_13 / windows-28603 / cp921 / 921 / x-IBM921 
ISO-8859-14 / iso-8859 14-1998 / iso-ir-199 / ISO_8859-14:1998 / latin8 / iso-celtic / |8 


ISO-8859-15 / ibm-923_p100-1998 / ibm-923 / Latin-9 / |9 / 8859 15 / atin0 / csisolatin0 / csisolatin9 / iso8859 15 fdis / cp923 / 923 / windows-28605 国 








SCSU / ibm-1212 / ibm-1213 
IBM850 / ibm-850_P100-1995 / ibm-850 / cp850 / 850 / csPC850Multilingual / windows-850 
IBM852 / ibm-852_P100-1995 / ibm-852 / cp852 / 852 / csPCp852 / windows-852 


IBM437 / ibm-437_P100-1995 / ibm-437 / cp437 / 437 / csPC8CodePage437 / windows-437 
“| 








ll 





| 
按 编码 重新 载 入 | | 按 编 码 保存 

















| 和 下 用 要 示 结果 县 下 字 用 程序 杭 出 有 绩 入 出国 av7s coswe 


完成 后 发 现 已 经 可 以 正常 显示 中 文 了 ， 但 是 如 果 关闭 项 目 重新 打开 ， 中 文 依然 无 法 正常 显 
示 。 所 以 我 们 还 需要 继续 设置 。 再 次 选择 “编辑 ">" 选择 编码 "菜单 项 ， 然 后 选择 UTF-8 一 项 ， 
点 击 按 编码 保存 按钮 。 如 下 图 所 示 。 
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从 Qt 4 到 Qt5 (一 ) Qt 5.2 安 装 、 程 序 迁 移 和 发 布 


y 
文件 ( ”编辑 (E) ”构建 (8) ”调试 (D) 分 析 (A) ”工具 (D ”控件 (W) ”帮助 (H) 
vxXx 审 hellodialog. cpp Lb :HelJoDialog 介 Widget 水 


4 i helloworld i  #include "hellodialog.h" 
helloworld.pro 2 #include "ui hellodialog.h" 


4 bh Headers 
加 hellodialog.h 4 HelloDialog: :HelloDialog (QWidget *parent) : 


QDialog (parent), 


4 眼 Sources ui(new Ui::HelloDialog) 


加 hellodialog.cpp 
凶 main.cpp = // 构造 函数 
9 Ui->setupUi (this); 





为 "hellodialog. epp* 选 择 编码 。 

ISO-8859-6 / ibm-1089 P100-1995 / ibm-1089 / arabic / csISOLatinArabic / iso-ir127 / ISO_8859-6:1987 / ECMA-114 / ASMO-708 / 8859 6 / cp1089 / 1089/ ^ 
ISO-8859-8 / ibm-5012_p100-1999 / ibm-5012 / hebrew / csISOLatinHebrew / iso-ir138 / ISO_8859-8:1988 / ISO-8859-8-I/ ISO-8859-8-E / 8859 8 / windows 
1SO-8859-8 / ibm-5012_P100-1999 / ibm-5012 / hebrew / cslSOLatinHebrew / iso-ir138 / ISO_8859-8:1988 / 1SO-8859-8-1 / ISO-8859-8-E / 8859 .8 / windows[ 
ISO-2022-CN / 1SO_2022,locale=zh,version=0 / csISO2022CN / x-ISO-2022-CN-GB 

1SO-2022-CN-EXT / 1SO_2022,locale=zh,version=1 
[UTF-8 me me - 
1SO-8859-13 / ibm-921 P100-1995 / ibm-921 / 8859 13 / windows-28603 / cp921 / 921 / x-IBM921 
1SO-8859-14 / iso-8859 14-1998 / iso-ir-199 / ISO_8859-14:1998 / latin8 / iso-celtic / |8 











rm 本 | 


























各 丁 四 要 未 结果 国 尖 应 用 程序 答 圭 用 坟 #4 窜 圭 有 ws cen 用 








这 样 设置 完 后 ， 文 件 已 经 使 用 UTF-8 进 行 保存 了 ， 后 面 再 打开 也 不 会 出 现 编码 错误 了 。 


2 代码 问题 


下 面 先 直接 运行 程序 ， 这 时 会 在 问题 面板 出 
现 QtGui/QApplication: No such file or directory 的 问题 提示 。 如 下 图 所 示 。 






@ QtGui/QApplication: No such file or directory 









1 问题 |? 于 占用 程序 输出 用 编译 输出 有 : 


我 们 双击 该 问题 ， 定 位 到 出 错位 置 ， 这 时 跳 转 到 了 main.cpp 文件 中 ， 可 以 看 到 第 一 个 头 文 件 
包含 找 不 到 路 径 。 如 下 图 所 示 。 
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让 网 mairn cpp 了 | A mainlint, c 


@ #include <QtGui/QApplication> 


#include "hellodialog.h" 
4 int mainl{lint argc, char *argv[]) 
{ 
QApplication alargc, BEGV) : 
我 们 可 以 到 QtGui 目 录 (我 这 里 是 : Cc:\Qt\Qt5.2.0\5.2.0-betal\mingw48_32\include\QtGui ) 
中 查看 一 下 ， 发 现 这 里 没有 QApplication 相关 文件 。 为 了 更 加 明了 和 准确 的 讲解 该 问题 ， 我 
们 在 Qt Creator 中 创建 一 个 基于 Qt 5.2 的 GUI 程序 作为 参照 。 


选择 “新建 ">“ 新 建文 件 或 项 目 ” 菜 单项 ， 这 里 可 以 看 到 在 应 用 程序 中 第 一 个 是 QtWidgets 
Application， 而 不 再 是 Qt 4 中 熟悉 的 Qt GuiApplication， 我 们 选择 它 作 为 模板 。 然 后 添加 项 目 
名 称 为 helloqt ， 路 径 大 家 选择 一 个 没有 中 文 的 目录 即 可 。 下 面 的 Kit 就 选择 默认 的 DesktopQt 
5.2， 然 后 类 信息 不 用 更 改 。 


完成 之 后 ， 我 们 先 运 行 一 下 新 建 的 helloqt 程序 ， 发 现 是 没有 问题 的 。 这 时 打开 

其 main.cpp 文件 ， 发 现 #include <QApplication> 是 这 样 写 的 ， 这 里 没有 添加 QtGui。 现 在 我 
们 更 改 前面 helloworld 项 目 中 main.cpp 文件 的 头 文件 包含 为 #include <QApplication> ， 不 
过 ， 改 成 这 样 后 依然 提示 找 不 到 文件 。 


现在 我 们 可 以 对 照 helloqt 文件 的 内 容 ， 看 看 还 有 哪里 与 我 们 Qt 4 程序 不 同 。 这 时 ， 
在 helloqt.pro 文件 中 会 很 明显 发 现 一 行 代码 : 


greaterThan(QT_MAJOR_VERSION，4): QT += widgets 


这 行 代码 的 大 致意 思 是 : 在 高 于 Qt4 的 版 本 中 要 添加 QT += widgets ， 也 就 是 说 要 使 

用 widgets 模块 ， 这 里 的 widgets 模块 到 底 包 含 了 什么 内 容 ， 有 什么 作用 ? 这 些 问题 我 们 暂 
且 不 考虑 ， 现 在 将 这 行 代码 复制 到 helloworld.pro 中 ， 然 后 运行 helloworld 程序 ， 发 现 程 序 
已 经 可 以 可 以 正常 运行 了 。 


3 应 用 程序 图 标 


在 这 一 节 的 最 后 ， 我们 再 补充 一 点 。 在 Qt 4 中 如 果 要 给 一 个 程序 添加 应 用 程序 图 标 ， 需 要 先 有 
一 个 ico 图 标 文件 ， 然 后 创建 一 个 .rc 文件 ， 还 要 输入 一 行 怪 异 的 代码 。 而 在 Qt 5 中 这 个 变 

得 非常 简单 ， 我 们 只 需要 将 ico 图 标 文件 放 到 源码 目录 ， 然 后 在 pro 项 目 文 件 中 添加 一 行 代 

码 RC_ICONS = myico.ico 即 可 ， 后 面 myico.ico 就 是 自己 图 标 文件 的 名 字 。 


三 、 发 布 Qt 5 程序 


现在 helloworld 程序 已 经 可 以 编译 运行 了 ， 下 面 我 们 将 打包 发 布 该 程序 。 要 作为 发 布 使 用 ， 
先 要 选择 编译 Release 版 本 ， 然 后 运行 。 完 成 后 到 编译 生成 目录 (我 这 里 

是 : E:\qtsrc\build-helloworld-Desktop_Qt_5_ 2 0 MinGW 32bit-Release\release ) 中 将 生成 
的 helloworld.exe 文件 复制 到 一 个 新 建 的 文件 夹 中 ， 比 如 这 里 放 到 了 新 建 的 helloworld 文件 
夹 中 。 然 后 双击 运行 helloworld 程序 ， 并 根据 提示 到 Qt 5.2 的 安装 目录 (我 这 里 





从 Qt 4 到 Qt 5 (一 ) Qt 5.2 安 装 、 程 序 迁 移 和 发 布 


的 


是 : ciNqQtNqat5.2.9\5.2.0-betat\mingw48_32\bin ) 中 将 需要 的 dil 文件 复制 过 来 ， 一 共 是 9 个 。 
这 样 就 可 以 在 本 机 上 和 运行 该 程序 了 ， 但 是 在 别 的 没有 安装 该 版 本 Qt 的 机 子 上 还 是 无 法 运行 ， 
这 时 需要 将 c:\Qt\Qt5.2.0\5.2.0-betal\mingw48_32\plugins 中 的 platforms 目录 复制 过 来 ， 而 
里 面 只 要 保留 qminimal.dl1 和 qwindows.dl1l 两 个 文件 即 可 。 最 终 效果 如 下 图 所 示 。 


ec n=l | S| 


es Wr 9 EE 
| 文件 (和 ”编辑 (E) 查看 (V) 工具 (T) 帮助 (H) 
组 织 v 包含 到 库 中 v ” 共享" 新 建文 件 夫 Sp 名 


从 


六 收 训 天 E 下 | 让 var 
山 鹿 面 platforms helloworld icudt51.dll icuin51.dll icuuc51.dll libgcc sd libstdc++- 
过 最 近 访 问 的 位 置 


w2-1.dll 6.dll 


libwinpthr Qt5Core.d Qt5Gui.dll Qt5Widge 
视频 P 

加 endl lI ts.dll 
国力 








全 WIN7 (C:) 
Ea TOOLS (D;) 
=» DATA fF’) 


| 11 个 对 象 


后 面 就 可 以 将 该 文件 夹 通过 压缩 文件 打包 进行 发 布 了 。 当 然 ， 如 果 程 序 中 使 用 了 其 他 模块 ， 
能 还 需要 复制 plugins 目录 中 的 相应 的 文件 。 





| 


对 于 大 部 分 Qt 4 程序 而 言 ，Qt 5 没有 太 大 的 改变 ， 不 过 在 升级 移植 的 过 程 中 还 是 会 发 现 很 多 细 
节 改 动 的 。 这 一 节 我 们 讲述 了 Qt 5.2 版 的 安装 、 设 置 ， 然 后 讲述 了 怎样 将 一 个 Qt 4 程序 使 用 Qt 
5 进行 编译 运行 ， 最 后 还 讲述 了 Qt 5 程序 的 发 布 。 

在 下 一 节 我 们 将 会 讲解 Qt 5 的 整个 框架 ， 让 大 家 更 加 清楚 Qt 5 中 改变 了 哪些 模块 ， 增 加 和 删除 
了 哪些 模块 。 

涉及 到 的 源码 : 


e hellodt.zip 
e helloworld.zip 


从 Qt 4 到 Qt5 (一 ) Qt 5.2 安 装 、 程 序 迁 移 和 发 布 


386 


从 Qt 4 到 Qt 5 (二 ) Qt 5 框架 介绍 


导语 


上 一 节 已 经 安装 好 Qt 5.2， 并 将 一 个 Qt 4 程序 迁移 到 了 Qt 5 上 。 其 中 我 们 讲 到 Qt 5 

中 QApplication 类 已 经 不 在 QtGui 模 块 中 了 ， 而 且 所 有 的 Qt 5 图 形 界 面 程序 都 必须 在 .pro 项 
目 文件 中 添加 widgets 模块 。 那 么 到 底 Qt 5 中 对 模块 进行 了 哪些 改动 ，Qt 5 的 框架 又 是 怎样 
的 ?这 一 节 将 和 大 家 一 起 看 一 下 这 些 内 容 。 


环境 : Windows 7 + Qt 5.2.0+QtCreator 3.0 


目录 


。 一 、 在 帮助 中 查看 所 有 模块 
。 二 、Qt 基 本 模块 框架 

e 三 、 图 形 界面 库 框 架 

。 四 、QtQml 和 QtQuick 框 架 


正文 


一 、 在 帮助 中 查看 所 有 模块 


打开 Qt Creator， 进 入 其 帮助 模式 ， 然 后 选择 目录 方式 进行 查看 ， 打 开 "“Qt 
5.2.0ReferenceDocumentation” 页 面 。 在 这 里 提供 了 Qt5.2 的 整体 介绍 ， 并 将 其 所 有 内 容 进行 
了 分 类 。 我 们 选择 右 下 角 的 “All Qt Modules” 来 查看 所 有 的 Qt 模块 。 如 下 图 所 示 。 


从 Qt 4 到 Qt 5 (二 ) 





bp Qt Android Extras embedded toolchains, and more. Multimedia 


P Qt Assistant Manual | 
bp Qt Bluetooth 是 Networking and 


WO on ith Qt, you can reuse code efficiently to target multiple platforms with Connectivity 


P Qt Core 全 Graphics 
» Qt Designer Manual Pasily enables developers to create applications for one platform and 
» Qt 5.2.0 Reference Docu asily build and run to deploy on another platform Mobile APIS 
> Qt Graphical Effects QML Applications 
P Qt GUI 
» Qt Help Getting Started 

Qt Image Formats All Qt Overviews | 
bp Qt Linguist Manual 
b Qt Mac Extras 
> Qt Multimedia What's New in Qt 5 


Getting Started with Qt 


Examples and Tutorials Reference 


Supported Platforms 


s AllQtC++ 
Classes 


m_AlOML Tvpes | 下 

ms AllQt Modules 

nm CQt Creator 
Manual 


Qt Licensing 





m AllQt Reference 
Daromont otinn 


可 下 








| 信 - 莹 入 以 定位 (Ctrl+W) 





在 所 有 模块 页 面 ， 将 Qt 的 模块 分 为 了 三 部 分 : Qt 基本 模块 (Qt Essentials) 、Qt 扩 展 模块 
(Qt Add-Ons) 和 Qt 工具 (Qt Tools) 。Qt 基 本 模块 中 包含 了 Qt 核心 基础 的 功能 ， 这 个 我 们 

会 在 后 面 详细 讲解 ; 而 Qt 扩展 模块 包含 了 以 前 QtMobility 中 的 一 些 与 移动 有 关 的 模块 ， 如 蓝 
牙 QtBluetooth 、 传 感 器 Qtsensors 等 。 还 包含 了 以 前 Qt 4 中 的 一 些 模块 ， 例 

如 QtDBus 、 QtxML 、 Qtscript 等 。 除 此 之 外 ， 还 新 添 了 一 些 模块 ， 例 如 图 形 效 

果 QtGraphicalEffects 、 串 口 Qt Serial Por t、 还 有 出 现在 商业 版 中 的 at3D 等 。 这 些 模块 都 
是 有 特殊 用 途 的 ， 它 们 很 多 需要 在 特殊 的 平台 上 才 可 使 用 。 在 扩展 模块 中 我 们 也 看 到 

了 Qt Print Support 打印 支持 模块 ， 它 是 以 前 很 多 类 的 重组 模块 ; 在 Qt 工具 中 包含 了 Qt 设计 
器 、Qt 帮 助 和 Qt 界面 工具 三 部 分 内 容 。 如 下 图 所 示 。 
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AN 
D3 


从 Qt 4 到 Qt5 (二 ) Qt 5 框架 介 


文件 (日 ”编辑 (E) ”构建 (8) ” 亩 坛 (D) 分 析 (A) 工具 (T) 控件 W) ”帮助 (H) 
目录 ” 日 X 于 所 字 重用 IWoiiss|amnocs2 ”| 过 和 方式 : 未 过 起 
> Qt Android Extras 
> Qt Assistant Manual _| All Modules 
b Qt Bluetooth 
”Qt Concurrent 
”Qt Core 
> Qt Designer Manual 
P Qt 5.2.0 Reference Docu... 


> Qt Graphical Effects 3 
;Qt GUI Qt Essentials Contents 


”Qt Help vlIQt Essentials 


Qt Image Formats 


,Qt Linguist Manual Qt essentials define the foundation of Qt on all platforms. They are vLQt Add-Ons 


,Qt Mac Extras available on all supported development platforms and on the tested * 
target platforms. They will remain source and binary compatible 


during Qt 5. 


Qt52» AllModules Qt 5.2.0 Reference Documentation | 


v Where to Go from Here 


Essential modules are general and useful for a majority of Qt 
applications. A module that is used for a Special purpose is considered an add-on module even if it is 
available on all supported platforms. 


The following table lists the Qt essentials: 


Module Description 


Qt Core Core non-graphical classes used by other modules 


Qt GUI Base classes for graphical user interface (GUI) components. Includes 
OpenGL. 


Qt Classes for audio, video, radio and camera functionality 
Multimedia 


et ON 
以 定位 (Ctrl+ aa 四 国 EEEO ET tn 同 EEE 9 





二 、Qt 基 本 模块 框架 


基本 模块 中 定义 了 适用 于 所 有 平台 的 Qt 基础 功能 ， 在 大 多 数 Qt 应 用 程序 中 需要 使 用 该 模块 
中 的 提供 的 功能 。Qt 基 本 模块 的 底层 是 Qtcore 模块 ， 其 他 所 有 模块 都 依赖 于 该 模块 ， 
为 什么 我 们 总 可 以 在 ,pro 文件 中 看 到 QT += core 的 原因 了 。 整 个 基本 模块 的 框架 如 下 图 所 
示 o 


QtMulhMedia 


OtOml 


QtNetwork QtOui 
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从 Qt 4 到 Qt5 (二 ) Qt 5 框架 介绍 


最 底层 的 是 Qtcore ， 它 提供 了 元 对 象 系统 、 对 象 树 、 信 号 楷 、 线 程 、 输 入 输出 、 资 源 系统 、 
容器 、 动 画 框架 、JSON 支 持 、 状 态 机 框架 、 插 件 系统 、 事 件 系统 等 等 所 有 基础 功能 。 该 模块 
的 重要 性 不 言 而 喻 。 在 其 之 上 ， 直 接 依赖 于 Qtcore 的 

是 QtTest 、 Qtsql 、 QtNetwork 和 Qt6ui 四 个 模块 ， 其 中 测试 模块 QtTest 和 数据 库 模 

块 Qtsql 是 相对 独立 的 ， 而 更 加 重要 的 是 网 络 模块 QtNetwork 和 图 形 模块 QtGui ， 在 它们 两 

个 之 上 便 是 Qt 5 的 重要 更 新 部 分 QtQml 和 QtQuick 。 而 最 上 层 的 是 新 添加 的 QtMultiMedia 多 

媒体 模块 ， 和 在 其 之 上 的 Qtwebkit 模块 。 


对 于 整个 框架 ， 大 家 可 以 理解 为 下 层 模块 为 上 层 模 块 提供 支持 ， 或 者 说 上 层 模 块 包 含 下 层 模 
块 的 功能 。 举 个 例子 ， 例 如 Qtwebkit 模块 ， 它 既 有 图 形 界 面部 件 也 支持 网 络 功能 ， 还 支持 多 
媒体 应 用 。 对 于 其 他 模块 ， 我 们 这 里 就 不 再 深入 介绍 ， 下 面 主要 来 讲解 一 下 其 中 最 重要 的 
QtGui 模 块 。 


三 、 图 形 界 面 库 框架 


现在 再 回 到 开头 的 问题 ， 我 们 已 经 发 现 QApplication 不 在 Qteui 模块 中 了 ， 其 实 不 仅 如 此 ， 
就 连 所 有 用 户 界 面 的 基 类 Qwidget 也 不 在 QtGui 模块 中 了 ， 它 们 被 重新 组 合 到 了 一 个 新 的 模 
块 Qtwidgets 中 。Qt 5 的 一 个 重大 更 改 就 是 重新 定义 了 QtGui 模 块 ， 它 不 再 是 一 个 大 而 全 的 图 
形 界 面 类 库 ， 而 是 为 GUI 图 形 用 户 界面 组 件 提 供 基 类 ， 包 括 了 窗口 系统 集成 、 事 件 处 理 、 
OpenGL 和 OpenGL ES 集成 、2D 绘 图 、 基 本 图 像 、 字 体 和 文本 等 内 容 。 在 Qt5 中 将 以 

前 atGui 模块 中 的 图 形 部 件 类 移动 到 了 Qtwidgets 模块 中 ， 将 打印 相关 类 移动 到 

了 Qt Print Support 模块 中 。 不 过 Qt 5 中 去 掉 了 QtopenGL 模块 ， 而 将 OpenGL 相 关 类 移动 到 
了 QtGui 模块 中 。 有 的 读者 可 能 发 现在 Qt 扩展 模块 中 依然 有 Qtopen6L 模块 ， 其 实 它 只 是 为 了 
便于 Qt 4 向 Qt 5 移植 才 保 留 的 ， 在 编写 Qt 5 程序 时 依然 强烈 推荐 使 用 Qteui 模块 中 

的 openGL 类 。 了 解 了 图 形 库 的 大 体 更 改 ， 下 面 我 们 来 看 一 下 Qt 图 形 界面 库 的 整体 框架 。 如 下 
图 所 示 。 


QtWebkit QtQuickl QWidget 


Scene graph(in qtdeclarative) 
S - ainter 
QBacking 2 
QAccessible QInputMethod 


EN EN WE Er Sn cr 


在 各 种 支持 的 平台 之 上 是 底层 的 平台 抽象 层 QRPA， 这 个 就 是 被 称 作 LightHouse 的 灯塔 项 目 ， 
它 是 Qt 可 以 无 处 不 在 的 基础 。 而 在 其 上 的 所 有 蓝 色 组 块 都 是 QtGui 模块 的 内 容 ， 它 们 被 分 为 
了 两 类 ， 一 类 以 OpenGL 为 核心 ， 它 是 现在 最 新 的 QtQuick2 和 Qtwebkit 的 基础 ; 一 类 是 以 辅 
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助 访问 和 输入 方式 为 基础 的 一 般 图 形 显示 类 ， 它 们 是 经 典 Qwidget 部 件 类 和 QtQuickl 的 基 
础 。 


四 、 Qtaml 和 QtQuick 框架 


如 果 要 问 Qt 5 最 大 的 更 新 和 特色 是 什么 ， 那 非 QtQml 和 QteQuick 英 属 。 其 实 ， 在 Qt4.7 的 时 候 
就 已 经 有 QtQuick 了 ， 不 过 它 在 那个 时 候 并 不 成 熟 。 只 有 到 现在 的 Qt 5，qml 和 quick 才 发 展 壮 
大 ， 逐 渐 规 范 起 来 ， 并 且 拥 有 了 与 Quidget 平分 秋色 的 地 位 。 大 家 可 能 已 经 了 解 到 ，qml 和 
quick 是 为 移动 设备 而 生 的 ， 并 且 是 今后 Qt 发 展 的 方向 。 


QtQuick 在 Qt4 中 是 这 样 定义 的 : Qt Quick 是 一 种 高 级 用 户 界面 技术 ， 使 用 它 可 轻松 地 创建 
供 移动 和 具 入 式 设 备 使 用 的 动态 触摸 式 界 面 和 轻 量 级 应 用 程序 。 三 种 全 新 的 技术 共同 构成 了 
Qt Quick 用 户 界面 创建 工具 包 : 一 个 改进 的 Qt Creator IDE、 一 种 新 增 的 简便 易学 的 语言 
(QML) 和 一 个 新 加 入 Qt 库 中 名 为 Qtpeclarative 的 模块 ， 这 些 使 得 Qt 更 加 便于 不 熟悉 C++ 
的 开发 人 员 和 设计 人 员 使 用 。 


不 过 在 Qt 5 中 将 以 前 的 QtQuick 分 为 了 两 大 部 分 : 一 部 分 是 QtQml ， 它 提供 了 一 个 QML 语 言 
框架 ， 定 义 并 实现 了 语言 引擎 基础 ， 还 提供 了 便于 开发 者 使 用 的 API， 实 现 使 用 自 定 义 类 型 来 
扩展 QML 语 言 以 及 将 JavaScript 和 C++ 集成 到 QML 代 码 中 。 另 一 部 分 是 新 的 QtQuick ， 它 是 一 
个 用 于 编写 QML 程 序 的 标准 库 ， 它 提供 了 使 用 QML 创 建 用 户 界面 程序 时 需要 的 所 有 基本 类 


型 。 


在 Qt 5 中 已 经 很 明了 地 分 离 了 qml 和 quick， 使 得 我 们 可 以 对 这 项 新 技术 拥有 更 加 清楚 地 认识 。 
与 其 说 这 是 一 项 新 技术 ， 不 如 说 这 是 Qt 创造 的 一 个 新 的 语言 和 类 库 ， 请 允许 在 这 里 打 个 不 太 
科学 的 比方 : qml 就 好 比 是 C++ 语言 ， 那 么 quick 就 是 Qt 库 ，Qt 库 是 用 C++ 语言 编写 的 一 个 类 

库 ， 而 quick 就 是 用 qml 语 言 编 写 的 一 个 类 库 ， 只 不 过 在 qml 的 世界 里 ， 没 有 类 这 个 叫 法 而 已 。 


QtQml 和 QtQuick 的 框架 如 下 图 所 示 。 


Scene graph 


QWindowSurface 





(OpenGL(ES)2.0) 


可 以 看 到 QtQml 和 QtQuick 是 独立 的 两 部 分 : QtQml 以 Qtcore 为 基础 ， 拥 有 QtNetwork 的 
相关 功能 ， 然 后 搭建 在 了 V8 和 V4 两 个 JavaScript 引 擎 上 ，V8 大 家 应 该 已 经 熟知 了 ， 而 V4 是 一 
个 轻 量 级 的 JavaScript 引 擎 。 不 过 这 里 需要 提 及 一 下 ， 在 最 新 的 Qt 5.2 版 本 中 ，V8 已 经 完全 被 





一 个 新 的 Qt 专 有 引 敬 代替 了 ， 原 因 是 V8 适 用 于 浏览 器 却 不 太 适 用 于 qml。 我 们 也 可 以 看 

到 QtqQml 本 身 并 没有 涉及 图 形 显 示 的 内 容 ; QtQuick 以 QPA 为 基础 ， 而 后 经 过 了 QtGui 、 
OpenGL 和 Scene graph 三 层 封装 ， 这 里 可 以 看 到 ， 新 的 QtQuick 是 建立 在 OpenGL 之 上 的 ， 
并 且 使 用 了 新 的 Scene graph 进 行 图 形 泻 染 。 很 明显 ， QtQuick 就 是 用 于 图 形 显示 的 。 


从 Qt 4 到 Qt 5， 整 个 框架 进行 了 优化 调整 ， 目 的 就 是 为 了 达到 更 好 的 性 能 和 以 后 进一步 地 扩 

展 。 可 以 发 现 ，OpenGL 和 WebKit 在 整个 框架 中 占有 举足轻重 的 地 位 ， 不 过 在 不 远 将 来 的 Qt 

5.3，Chromium 将 代替 WebKit 成 为 Qt 的 Web 引 营 ， 因 为 Chromium 提 供 了 更 好 的 跨 平 台 性 和 其 
他 一 些 易 用 性 。 


入 门 篇 
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导语 


时 间 转 眼 而 逝 ， 看 一 下 上 次 发 的 教程 ， 已 经 是 一 年 前 的 事情 了 。 这 一 年 发 生 了 很 多 人 
括 自己 也 包括 Qt。 当 然 ， 自 己 很 忙 或 者 说 为 了 编写 《Qt 5 编程 入 门 》 这 些 理由 ， 并 不 能 

年 的 搁置 进行 开脱 ， 所 以 这 里 首先 还 是 要 向 广大 读者 ， he 抱 
歉 ， 让 你 们 久 等 了 。 


我 一 直 把 写 博文 写 教 程 当做 是 一 种 爱好 ， 即 便 是 技术 类 博文 也 是 如 此 ， 想 到 哪里 就 写 哪里 ， 
少 了 点 技术 类 文章 的 严谨 ， 多 了 点 抒情 类 文章 的 随 性 。 这 也 是 我 教程 的 一 种 风格 ， 我 坚信 只 
有 爱好 的 东西 才能 做 到 完美 ， 做 大 极致 ， 编 程 亦 如 此 。 一 年 没有 更 新 博文 ， 也 是 觉得 有 些 时 
候 ， 有 点 急功近利 了 ， 这 不 符合 我 写 这 个 系列 教程 的 初衷 ， 所 以 即便 很 多 朋友 邀 我 尽快 更 
新 ， 我 还 是 没有 为 了 应 付 而 进行 大 幅度 更 新 。 


其 实 这 一 年 中 我 也 一 直 在 做 一 些 和 Qt 有 关 的 事情 ， 比 如 说 前 面 提 到 的 《Qt 5 编程 入 门 》， 这 
个 是 和 豆子 (devbean) 一 起 写 的 ， 现 在 已 经 出 版 上 市 了 。 在 写 这 本 书 的 同时 ， 想 了 很 多 ， 也 
有 很 多 好 的 东西 想 和 大 家 分 享 ， 但 是 还 是 因为 精力 有 限 ...... 再 比如 说 为 《Qt Creator 快 速 入 
门 》 编 写 了 实验 讲义 和 PPT 课 件 ， 完 成 这 个 的 时 候 ， 我 对 该 书 第 三 版 已 经 有 了 大 致 的 思路 ， 
也 本 想 早早 和 大 家 探讨 ， 但 还 是 因为 精力 有 限 ...... 再 有 就 是 和 天 诅 科 技 合 作 的 诅 入 式 教 程 ， 这 
个 也 是 和 hzzhou 合 作 的 教程 ， 年 初 的 时 候 用 三 个 月 跟 hzzhou 合 作 开 发 了 一 个 小 项 目 ， 这 次 再 
次 合作 ， 将 探索 Linux 嵌 入 式 编程 教程 的 编写 


好 了 ， 好 像 扯 了 很 多 废话 ， 现 在 终于 有 了 时间 让 自己 静 下 心 来 了 ， 万 事 开 头 难 ， 只 要 开始 了 就 
要 坚持 下 去 ， 以 后 的 一 段 时 间 ， 将 以 更 新 教程 为 主要 业余 工作 。 这 一 篇 之 所 以 叫 全 新 的 开 
始 ， 既 是 因为 Qt 开源 (qt-project.org) 和 Qt 商业 (qt.digia.com) 进行 合并 ， 成 立 了 Qt 全 资 子 
公司 ， 而 且 发 布 了 全 新 的 qt.io 网 站 ， 也 是 因为 最 新 的 Qt 5.5 版 本 已 经 公布 ， ns ， 一 年 没 
有 写 网 络 教程 了 ， 风 格 和 思路 可 能 会 与 以 前 有 所 不 同 。 作为 全 新 开始 的 第 一 篇 ， 这 里 不 涉及 
太 多 的 技术 问题 ， 而 是 讲 一 些 新 接触 Qt 应 该 了 解 的 内 容 。 后 面 的 章节 我 们 会 从 Qt re 

讲 起 ， 如 果 要 学 习 C++ Widget 编 程 ， 可 以 参考 前 面 的 文章 。 


环境 : Windows 7 + Qt 5.5.0+QtCreator 3.4.2 


目录 


。 一 、 下 载 Qt 
。 二、 安装 Qt 
e@ 三 、 激 活 Qt 账 户 


。 四、 学 习 Qt 视 频 教程 


e 五 、 运 行 一 个 示例 程序 


正文 
一 、 下 载 Qt 


这 里 先 说 一 下 ， 很 多 同学 不 知道 Qt 去 哪里 下 载 ， 尤 其 是 老 版 本 的 Qt 根本 不 知道 哪里 可 以 找 
到 ， 其 实现 在 可 以 到 http://download.qt.io 上 下 载 所 有 Qt 开源 的 内 容 ， 其 目录 如 下 图 所 示 。 


Name Last modified Size Metadata 
雷 snapshots/ 26-Mar-2014 11:52 
雷 online 13-Mar-2014 08:45 
击 official_releases) 17-Dec-2014 09:57 
雷 ministro 07-May-2013 17:46 
雷 learning 22-May-2013 16:20 
曾 development_releases 25-Sep-2014 14:31 
雷 community_releases 31-Jan-2014 09-29 
凋 archive/ 16-Dec-2014 10:39 


这 里 最 主要 的 目录 是 official releases ， 其 中 提供 了 官方 发 布 的 正式 版 软件 。 就 是 说 要 使 用 
正式 发 布 的 稳定 版 Qt、Qt Creator 等 ， 到 这 里 下 载 ; 而 在 archive 目 录 中 是 存档 内 容 ， 这 里 是 
Qt 和 Qt Creator 的 仓库 ， 里 面包 含 了 所 有 的 版 本 ， 所 以 如 果 想 找 老 版 本 的 同学 可 以 在 这 个 目录 
中 查找 。 其 他 几 个 目 a 一 些 相关 的 软件 或 者 工具 ， 比 如 在 snapshots 目 录 中 可 以 下 载 到 
最 新 版 本 的 快照 ， 不 过 可 能 只 提供 了 源码 还 需要 自己 进行 编译 。 


这 里 我 们 下 载 development_releases,qt.5.5.5.5.0 中 的 : 


qt-opensource-windows-x86-android-5.5.0.exe 


为 了 便于 大 家 下 载 ， 在 我 们 qter 论 坛 的 下 载 页 面 提供 了 便捷 下 载 链 接 ， 如 下 图 所 示 。 


Home 一 下载 


版 权 声 明 : 从 本 社区 下 载 的 所 有 资源 不 得 用 于 商业 用 途 ! 


| Qt SDK 下 载 ] Qt Creator 下 载 历史 版 本 下 载 


比如 点 击 "Qt SDK 下 载 " 按 钮 进入 页 面 ， 进 入 后 会 默认 显示 最 新 Qt 版 本 的 下 载 ， 如 果 要 下 载 其 
他 内 容 ， 可 以 点 击 Parent Directory 跳 转 到 上 一 层 目 录 。 
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Name Last modified Size Metadata 
ene ] 
商 5.5/ 01-Jul-2015 09:13 - 
曾 5.4/ 02-Jun-2015 07:53 - 
曾 5.3/ 16-Sep-2014 08:45 - 
而 5.2/ 24-Feb-2014 13:07 - 
而 5.1/ 06-May-2014 12:44 - 
击 5.0/ 03-Jul-2013 11:57 - 
曾 4.8/ 25-May-2015 17:55 - 


二 、 安 装 Qt 5.5 


进行 Qt 5.5 的 安装 ， 与 以 前 的 版 本 稍微 不 同 的 地 方 是 ， 一 开始 会 提示 让 登陆 或 者 注册 Qt 社区 账 
户 。 如 下 图 所 示 。 


Welcome to the Qt installer 


This installer provides you the open source version of Qt, includine source 
and binaries. 


You have the option to log in using your Qt Account credentials [e.g. Qt 
Forum login). 


IE you don’ + have a Qt Account yet, you can opt to create one in the next 
step. 


t Account gl 0 to 


Packagln d pricing options 


LGFL compliance & obligations 


Choosine the right license for vour prolect 





如 果 已 经 有 了 一 个 Qt 账户 ， 可 以 直接 填写 Login 后 面 的 账户 邮箱 和 密码 ; 如 果 没 有 注册 过 ， 可 
以 在 Sign-up 后 面 填写 要 注册 的 邮箱 、 密 码 。 如 下 图 所 示 。 
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Qt Account — Your unified login to everything Qt 


Please log lm to Qt Account 





Login Email 





Fassword 
Forgot password? 


Heed a Qt Account? 


Sien-up |Yalid email address 





Password 





Confirm Password 


I accept the service terms. 





当然 也 可 以 点 击 Skip 按 钮 直接 跳 过 这 一 步 。 不 过 拥有 一 个 Qt 账户 还 是 很 有 用 的 ， 比 如 可 以 到 
Qt 论坛 进行 发 帖 等 。 所 以 我 们 这 里 选择 注册 一 个 新 的 Qt 账户 ， 这 里 要 注意 ， 输 入 的 密码 至 少 
要 7 位 ， 不 能 包含 上 面 输入 的 邮箱 地 址 ， 而 且 要 包括 小 写字 母 、 大 写字 母 、 数 字 和 符号 四 种 类 
型 中 的 三 类 。 如 下 图 所 示 。 
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Qt Account — Your unified login to everything Qt 


Flease log in to Qt Account 





Login |Email 








Password 





了 orEgot password? 


Heed a Bt Account? 





Siaen-up yatelllruxa@l63.com 





| Minimum 7 characters. Cannot contain your 

I accep| emall address. 

Must include at least three of these four 

types: lowercase letters, uppercase letters, 

digits, symbols, 

Accepted characters: a-z, A-Z, 0-9, space 

and symbols: 

-1"#V0=?@${D}. |;:*^~+ 





输入 完 密码 后 ， 勾 选 下 面 的 同意 服务 条 款 选项 ， 然 后 就 可 以 点 击 Next 按 钮 继续 安装 Qt 了 。 如 


下 图 所 示 。 
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Qt Account — Your unified login to everything Qt 


Flease log im to Qt Account 





Login |En 11 








Password 





了 orEgot password? 


Heed a Bt Account? 





Siaen-up yatelllruaxa@l63.com 
从 兴 委 夫 作 党 闪 过 千夫 入 举 委 者 
涡 浸 泌 帘 堵 洁 二 滞 洲 堆 志 党 洁 染 


I accept the service terms. 








首先 要 设置 安装 路 径 ， 注 意 安 装 路 径 中 不 要 有 中 文 。 这 里 我 们 选择 默认 的 路 径 ， 如 下 图 所 
示 “。 
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安装 文件 来 
请 指定 将 在 其 中 安装 Qt 5.5.0 的 文件 来 
CAQtAQt5.5. 串 


Associate common file types with Qt Creator. 





下 一 步 是 选择 组 件 ， 上 默认 的 选项 已 经 满足 我 们 的 开发 要 求 了 ， 如 果 有 其 他 要 求 ， 比 如 需要 源 
码 组 件 或 者 Android armv5 开 发 ， 可 以 进行 相关 选择 。 如 下 图 所 示 。 
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选择 组 件 
请 选择 您 想 要 安装 的 组 件 。 
4 | 夯 :Qt Qt 5.5.0 
4 国 Qt 5.5 此 组 件 将 占用 您 大 约 3. 38 68 的 硬 
MinGW 4.9.2 32 bit 盘 空 间 。 
Android x86 

Android armv5 
Android armv7 
回 Source Components 
Qt Canvas 3D 
Qt Script 
Qt3D 
Qt Location 
加 Qt Quick Controls 
加 Qt Quick 1 

4 夯 | Tools 
Qt Creator 3.4.2 
MinGW 4.9.2 

4 Qt Extras 
Qt WebView 1.1 (Tech Preview) 


| 叶 人 | 四 全 | 国人 夺 二 





再 往 下 是 勾 选 同意 许可 协议 。 如 下 图 所 示 。 
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国 


Qt 15 avalilable under a commercial license with various pricing models and 
Packages that meet a variety of needs. Commercial Qt license keeps your 
code proprietary Where only you can control and monetize on your end 
product’ s development, user experience and distribution. You also get 
Ereat perks like additional functionality, productivity enhancine tools, 
world-class support and a close strategic relationship with The Qt Comparny 
to make Sure your product and development goals are met. 


Qt has been created under the belief of open development and providinge 
freedom and choice to developers. To support that, The Qt Company also 
licenses Qt under open source licenses, where most of the functionality is ™ 


© I have read and agree to the terms contained in the license agreements. 


加 Ido accept the terms and conditions of the above license agreements. 


se 
职 ; 





当 安 装 完成 后 ， 默 认 Launch Qt Creator 是 名 选 的 ， 这 样 点 击 完成 按钮 就 会 自动 户 动 Qt 
Creator， 如 下 图 所 示 。 


Qt 5,5.0 设置 


正在 完成 Qt 5.5.0 向 导 
单 击 “ 完 成 ”以 退出 Qt 5.5.0 向 导 。 


ts 和 





三 、 激 活 Qt 账户 
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QtCreator 运 行 后 如 下 图 所 示 ， 还 是 我 们 熟悉 的 界面 。 在 正式 讲解 前 ， 我 们 再 来 说 说 Qt 账户 ， 
点 击 欢迎 界面 的 QtAccount 链 接 ， 可 以 快捷 登陆 Qt 账户 。 


日 “构建 (B) 调 坛 (D) Analyze 工具 (MT) 控件 (W) ”帮助 (H) 


up New Project | Open Project 


Sessions Recent Projects 


B default (last session) 


New to Qt? 

Learn how to develop your 
own applications and 
explore Qt Creator. 





Get Started Now | 





EF. Qt Account 


和 Qt Cloud Services 
[ea Online Communit7 


EN Blogs 


@ User Guide 








ja 


这 时 会 弹出 浏览 器 窗口 ， 显 示 Qt 账 户 登陆 界面 。 我 们 可 以 输入 前 面 注 册 过 的 账户 ， 然 后 点 击 
Sign in 按 钮 ， 如 下 图 
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Qt 


Qt Account 


Your unified login to everything Qt 
yafeilinux@163.com 
CD 


Forgot password? 


Create Qt Account 
如 果 是 第 一 次 登陆 ， 会 提示 让 验证 邮箱 ， 点 击 如 下 图 所 示 的 链接 。 


Your unified login to everything Qt 


Your email address has not yet been verified 


Confirm your email to get full functionality. Check your email for further instructions. 


Resend the instructions to your email. 





这 时 会 提示 已 经 向 注册 的 邮箱 发 送 了 验证 链接 ， 如 下 图 所 示 。 


仆 
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Check your emall 


We have sent confirmation link to your email. lf you 
do not receive it within few minutes, please check 
your spam and junk filters. 


ContiNnue 





现在 我 们 登陆 自己 注册 的 邮箱 ， 打 开 Qt 发 送 来 的 邮件 ， 然 后 将 Verify now 后 面 的 链接 复制 粘贴 
到 浏览 器 地 址 栏 进行 访问 。 如 下 图 所 示 。 


Qt Account email verification needed 月 户 O 


\:{ The Qt Company<qtaccount@theqtcompany.com> | 二 ) (由 bounce-md_30371886.55b579b3.v1-06fb3d4c497446a195db58797ab9c927@mandrillapp.com 代 发 ,帮助 ) 





收 件 人 :( 我 <yafeilinux@163.com> ) 
时 


寺 间 : 2015 年 07 月 27 日 08:22 (星期 一 ) 


Thank you for creating a Qt Account. Please verify your email address ' yafeilinux®@163.com within 48 hours to complete the registration process. 
Yerify now: |https: //login. qt. io/confirm/XdbRG15waeOnLvbIeSh5xkM9o0JprTmh 


If you did not create this account, please ignore this request. You are welcome to reply to this email with any questions or feedback you might have. 


Best regards, 


The Qt account Team 


在 弹出 的 页 面 卉 写 一 些 个 人 信息 后 ， 点 击 Confirm 按 钮 ， 如 下 图 所 示 。 
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Qt 


Your Account 


yafe 


huo 


Send me news about Qt 


Confrm 





现在 就 完成 了 Qt 账户 的 验证 ， 登 陆 Qt 账户 以 后 ， 可 以 更 好 的 使 用 Qt 社区 的 一 些 内 容 ， 比 如 
Documentation 文 档 、Blog 博 客 、WiKi 百 科 、Forum 论 坛 等 。 如 下 图 所 示 。 
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加 Qt Account 人 yafeihuo 


QtAccountHome Your unified login to everything Qt 


My Profile 
Exclusive offer for Qt Account users: 
Support Center 
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Experience the ; Documentation 
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creation ; Qt Blog 


JOIN US ; Qt Wiki 


， Qt Forum 





四 、 学 习 Qt 视 频 教程 
在 欢迎 界面 点 击 "教程 "按钮 ， 可 以 看 到 Qt 提供 的 一 些 视频 教程 ， 如 下 图 所 示 。 
Eee 
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我 们 点 击 一 个 视频 ， 发 现 它 是 放 在 YouTube 上 的 ， 这 样 国内 的 同学 也 许 无 法 直接 访问 ， 不 过 还 
是 可 以 通过 一 些 方式 来 登陆 YouTube 的 ， 这 个 有 兴趣 的 同学 可 以 百度 一 下 。 视 频 教 程 的 播放 效 
果 如 下 图 所 示 。 
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当然 ， 视 频 教程 是 英文 的 ， 别 说 自己 英文 不 好 ， 编 程 里 面 除了 数字 符号 ， 都 是 英文 了 ， 所 以 
尝试 接触 英文 教程 是 学 好 编程 必须 做 的 。 


五 、 运 行 一 个 示例 程序 


下 面 点 击 "示例 "按钮 ， 我 们 来 运行 一 个 Qt 自 带 的 示例 程序 。 比 如 这 里 选择 第 二 个 Planets 
Example 示 例 ， 它 是 Qt 5.5 中 新 增 的 canvas3d 演 示 程 序 ， 如 下 图 所 示 。 
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这 时 会 自动 弹出 该 示例 的 帮助 文档 ， 如 下 图 所 示 。 




















y Planets'qml = Qt Creator [7 Help - Planets Example | Qt Canvas 3D 1.0 
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Qt55» QtCanvas 3D» Planets Example Qt 5.5.0 Reference Documentation 


Contents 


The Planets example demonstrates how to implement an Y Qt Quick Implementation 


application that combines the use of three.js library-based v The JavasScript Code 
Canvas3D rendering with Qt Quick 2D elements. The example v Handling the Mouse 
shows the eight planets of our Solar System with the Sun Events 
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如 果 想 在 Qt Creator 的 帮助 模式 里 查看 该 文档 ， 可 以 直接 点 击 上 面 的 “Go to HelpMode”， 这 样 
该 文档 就 会 在 帮助 模式 中 显示 。 如 下 图 所 示 。 
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现在 在 左下 角 可 以 看 到 planets 项 目 还 未 配置 ， 可 以 在 项 目 模式 中 进行 配置 ， 如 下 图 所 示 。 


planets 项 目 planets 尚未 西 置 


想 司 同 您 可 以 在 中 配置 它 
未 配置 





点 击 项 目 模式 ， 可 以 看 到 默认 选择 了 Desktop Qt 5.5.0MinGw 套 件 ， 这 表明 是 基于 Qt5.5.0 使 用 
Gi ， 也 就 是 说 安装 好 Qt 5.5， 就 自动 为 我 们 配置 好 了 开发 环境 ， 可 以 直接 
使 用 。 我 们 单 击 下 面 的 ConfigureProject 按 钮 来 配置 该 项 目 。 如 下 图 所 示 。 





国 Ds Configure Project 


























E> 卫 Qt [Creator car use the following kits for project planets: 
YS The project planets is not yet configured. 

s Qt Creator carmot parse the project, because no kit has been set up. 
设计 Please add a kit in the options or via the maintenance tool of the SDK. 
AN VI Select all kits 
Do Desktop Qt 5.5.0 MinGH 32bit 

项目 Import Build From... 
国 Anndroid has not been configured. Create Android kits. 
Anaiyze 
@ 
攻 助 


这 时 可 以 看 到 右 下 角 读 取 项 目的 进度 ， 如 下 图 所 示 。 
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中 planets.pro 35 

Po examples 3 import QtQuick 2.0 

》 区 源 文件 38 import QtCanvas3D 1.0 

> 下 ' QML 1 

| 逆 其 他 文件 42 4 Item { 

3 id: mainview 

width: 1280 
height: 768 
visible: true 
property int focusedPlanet: 
property int oldPlanet: ol 
property real xLoOkKkAtOffset: 
property real yLookAtOffset: 
property real ZLOOKREOEftset : 
property real xCameraOffset: 
property real yCameraOffset: 
property real zCameraOffset: 
property real cameraNear: 0 


import "planets.js" as GLCode 


NumberAnimation { 
target: mainview 
to: 0 


duration: 1250 


} 


NumberAnimation { 


target: mainview 


to: 0 


100 


id: lookAtOffsetAnimation 
properties: "xLOoOkKkAtOffset, yLookAtOffset, zLookAtOffset" 


easing.type: Easing.InOutQuint 


id: cameraOffsetAnimation 
properties: "xCameraOffset, yCameraOffset, zCameraOffset" 


easing.type: Easing.InOutQuint 





Wh 








0 Ts ms 





程序 运行 效果 如 下 图 所 示 。 大 家 可 以 看 到 Qt 5 程序 的 强大 功能 。 
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因为 自 带 的 示例 程序 是 以 后 学 习 的 参考 ， 所 以 ， 如 果 想 在 程序 上 进行 改动 ， 最 好 在 源码 的 备 
份 上 进行 修改 。 要 定位 到 该 程序 的 源码 ， 可 以 在 列表 文件 上 右 击 ， 然 后 点 击 “ 在 Explorer 中 显 
示 ”， 如 下 图 所 示 。 
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4 [mm planets 
[人 
名 训 在 Explorer 中 显示 | 
注 ”在 此 弹出 命令 提示 
ml 0 用 ... 打 开 | 
十 : Find in This Directory... 
删除 文件 … Del 
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折 公 全 部 





现在 看 到 程序 的 源码 目录 了 ， 如 下 图 所 示 ， 可 以 将 其 复制 到 其 他 位 置 ， 然 后 重新 打开 该 项 
目 ， 以 后 就 可 以 按照 自己 的 意愿 修改 该 项 目 了 ， 如 果 把 项 目 修 改 的 面目 全 非 了 ， 又 想 恢 复 到 
原始 状态 ， 只 需要 再 次 拷贝 一 下 源码 即 可 。 


We > DB, 
build-plan controls oneqt 
ets-Deskt 


op Qt 55 
_0 MinG... 


pro 


threejs 





从 整体 下 载 、 安 装 并 运 例 程 序 的 过 程 看 来 ， so 


Re SDK， 然 后 通过 一 个 示例 程序 测试 了 安装 的 Qt SDK 可 以 使 用 ， 
样 就 完成 了 我 们 开发 环境 的 搭建 ， 从 下 一 篇 开始 ， 我 们 将 进入 QtQuick 的 世界 。 
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导语 


在 上 一 篇 我 们 已 经 安装 好 了 Qt 5.5， 现 在 正式 开始 学 习 Qt5 中 全 新 的 Qt Quick 编 程 。Qt Quick 
对 于 大 部 分 人 来 说 是 一 个 全 新 的 概念 ， 对 这 样 一 个 全 新 的 东西 要 怎样 开始 学 习 呢 ?在 没有 专 
业 书 籍 (当然 ，《Qt 5 编程 入 门 》 现 在 已 经 出 版 了 ， 在 这 篇 文章 中 我 们 假设 读者 没有 Qt Quick 
编程 经 验 ) ， 没 有 网 络 教 程 ， 需 要 自己 开荒 的 情况 下 ， 我 们 的 线索 就 是 Qt 帮助 文档 ! 


在 这 一 篇 中 ， 我 们 会 从 Qt 帮助 入 手 ， 开 始 进入 Qt Quick 的 世界 ， 先 讲解 一 些 基本 的 概念 ， 然 
后 跟 大 家 一 起 看 一 下 最 简单 的 Qt Quick 项 目 是 什么 样 的 。 让 初学 者 先 有 一 个 大 体 的 印象 。 


环境 : Windows 7 + Qt 5.5.0+ Qt Creator 3.4.2 


目录 


。 一、Qt Quick 和 和 QML 简介 
。 二 、 创 建 一 个 Qt Quick 应 用 
。 三 、QML 文 件 内 容 介 绍 
四 、 其 他 文件 内 容 介绍 


正文 


一 、Qt Quick 和 QML 和 简介 


要 学 习 Qt Quick 编 程 ， 那 么 到底 什么 是 Qt Quick 呢 ? 因为 Qt Quick 是 Qt 新 引入 的 一 个 东 东 ， 所 
以 要 了 解 它 ， 最 好 的 方式 就 是 查看 Qt 的 官方 文档 。 这 里 我 们 打开 Qt Creator， 然 后 点 击 进 入 帮 
助 模式 ， 在 这 里 选择 “目录 "查看 方式 ， 这 样 可 以 显示 出 帮助 文档 中 主要 内 容 的 目录 。 在 这 里 我 
们 选择 “Qt Qucik”" 条 码 ， 如 下 图 所 示 。 


访 所 入 天 上 天， | 答 信 
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Qt55» QtQuick 


;Examples 
bp QML Types 
Qt Graphical Effects 
Qt Quick Dialogs 
Qt XML . The Qt Quick module is the standard library for 
Stn writing QML applications. While the Qt QML module 
Qt Quick Controls provides the QML engine and language 
”Qt 5.5.0 Reference Documentation infrastructure, the Qt Quick module provides all the 
EL irae basic types necessary for creating user interfaces 
with QML. lt provides a visual canvas and includes 
types for creating and animating visual components, 
models and views and delayed object instantiation. 





该 文档 讲述 了 什么 是 Qt Quick， 以 及 Qt Quick 所 有 相关 的 内 容 。 可 以 看 到 ， 这 里 指出 Qt Quick 
由 Qt Quick 模 块 提供 ， 它 是 一 个 编写 QML 应 用 的 标准 库 。Qt Quick 模 块 提供 了 两 种 接口 : 使 
用 QML 语 言 创建 应 用 的 QML 接 口 和 使 用 C++ 语 言 扩展 QML 的 C++ 接 口 。 使 用 Qt Quick 模 块 ， 
设计 人 员 和 开发 人 员 可 以 轻松 地 构建 流畅 的 动态 式 QML 用 户 界 面 ， 并且 在 需要 的 时 候 ， 可 以 
将 这 些 用 户 界 面 连接 到 任何 C++ 后 端 


说 到 这 里 ， 童 靳 们 可 能 很 想 知道 ， 那 什么 是 QML 呢 ?得 益 于 Qt 强大 的 帮助 系统 ， 所 有 相关 的 
pee 去 ， 我 们 可 以 点 击 最 上 面 的 "Qt QML" 链 接 到 其 介绍 页 面 ， 如 下 图 所 示 。 


Qt Quick 


Qt55»% QtQuick 


The Qt Quick module is the standard library for writing QML applications. While TT p 
provides all the basic types necessary for creating user interfaces with QML. lt provides a visual can\ 
receiving user input, creating data models and views and delayed object instantiation. 


到 该 页 面 以 后 ， 可 以 看 到 ，Qt QML 模 块 为 QML 语 言 开发 应 用 程序 和 库 提供 了 一 个 框架 。 它 定 
义 并 实现 了 语言 及 其 引擎 架构 ， 并 且 提 供 了 一 个 接口 ， 允 许 应 用 开发 者 以 自 定义 类 型 和 集成 

JavaScript 与 C++ 代码 的 方式 来 扩展 QML 语 言 。Qt QML 模 块 提供 了 QML 和 C++ 两 套 接口 。 如 
下 图 所 示 。 


Qt QML 


Qt5.5» Qt QML 


The Qt QML module provides a framewoHctor developing 
applications and libraries with the4QML languagey lt defines 
and implements the language and engine Inirastructure， 


and provides an APl to enable application developers to 
extend the QML language with custom types and integrate 
QML code with JavaScript and C++. The Qt QML module 
provides both a QML API and a C++ API. 


这 里 介绍 了 Qt QML， 并 且 提 到 了 QML 语 言 ， 我 们 进一步 深入 ， 看 看 QML 语 言 到底 是 什么 ! 点 
击 最 上 面 的 "QML language” 关 键 字 。 这 时 跳 转 到 了 “QML Applications” 页 面 ， 这 里 对 QML 进 行 
了 定义 。 


QML (Qt Meta-Object Language，Qt 元 对 象 语言 ) 是 一 种 用 于 描述 应 用 程序 用 户 界 面 的 声明 
式 编程 语言 。 它 使 用 一 些 可 视 组 件 以 及 这 些 组 件 之 间 的 交互 来 描述 用 户 界面 。QML 是 一 种 高 
可 读 性 的 语言 ， 可 以 使 组 件 以 动态 方式 进行 交互 ， 并 且 允 许 组 件 在 用 户 界面 中 很 容易 地 实现 
复 用 和 自 定义 。QML 允 许 开 发 者 和 设计 者 以 类 似 的 方式 创建 高 性 能 的 、 具 有 流畅 的 动画 效果 
的 、 极 具 视 觉 吸 引力 的 应 用 程序 。QML 提 供 了 一 个 具有 高 可 读 性 的 类 似 JSON 的 声明 式 语 法 ， 
并 提供 了 必要 的 JavaScript 语 名 和 动态 属性 绑 定 的 支持 。QML 语 言 和 引擎 框架 由 Qt QML 模 块 
提供 。 


到 这 里 ， 也 许 大 家 对 QML、Qt Quick 有 了 一 定 的 了 解 ， 也 许 有 的 读者 可 能 对 这 些 概念 更 加 模 
糊 了 。 这 里 举 个 可 能 不 是 很 恰当 的 比喻 ，Qt Quick 之 于 QML ， 正 如 Qt 之 于 C++，QML 是 Qt 中 
开发 的 一 个 新 的 语言 ， 而 Qt Quick 是 这 个 语言 的 一 个 组 件 库 ， 其 中 包含 了 很 多 用 QML 写 的 可 
以 现成 使 用 的 组 件 。 大 家 暂且 这 样 理 解 ， 对 于 一 些 内 容 也 不 要 过 于 执 扬 ， 等 后 面 见得 多 了 ， 
用 的 多 了 ， 慢 慢 就 领悟 了 ! 


对 于 一 个 新 的 、 庞 杂 的 语言 (或 者 说 技术 ) 要 怎么 学 习 ， 正 如 很 多 同学 在 问 如 何 学 习 Qt， 内 
容 实在 太 多 了 ! ? 其 实 很 简单 ， 答 案 是 一 步 一 步 学 习 ! 这 里 没有 开玩笑 的 意思 ， 千 里 之 行 始 
于 足下 ， 大 家 都 懂 的 道理 ， 只 是 不 愿 付 出 行动 而 已 。 那 有 没有 捷径 ? 答案 是 "有 ”， 就 是 从 最 简 
单 的 内 容 开始 ， 从 最 标准 的 教程 入 手 ， 以 最 规范 的 程序 为 例 ， 保 证 一 开始 自己 就 是 纯正 血 
统 ， 这 样 才 不 至 于 写 出 的 程序 乱七八糟 ， 错 误 百出 ， 浪 费 大 量 时 间 也 找 不 出 bug 所 在 。 


学 习 Qt， 最 标准 的 教程 就 是 帮助 文档 ， 最 规范 的 程序 就 是 示例 程序 ， 而 且 如 何 开始 学 习 ，Qt 
文档 中 都 给 了 入 口 ， 比 如 要 学 习 QML 语 言 ， 这 里 可 以 点 击 “First Steps with QML”" 链 接 ， 而 要 
在 Qt Creator 中 开发 Qt Quick 程 序 ， 可 以 参考 “Creating Qt Quick Projects in Qt Creator 链 
接 ， 如 下 图 所 示 ， 本 篇 后 面 的 内 容 就 是 按照 这 些 文档 来 的 。 


第 52 篇 Qt Quick 简 介 


Qt5.5» QML Applications 


QML is a declarative language that allows user interfaces to be described in terms of their visual components and how 
they interact and relate with one another ltis a highly readable language that was designed to enable components to be 
interconnected in a dynamic manner and it allows components to be easily reused and customized within a User 
interface. Using the QtQuick module, designers and developers can easily build fluid animated user interfaces in QML， 
and have the option of connecting these user interfaces to any back-end C++ libraries. 


What is QML? 


QML is a user interface specification and programming language. lt allows developers and designers alike to create 
highly performant, fluidly animated and visually appealing applications. QML offers a highly readable, declarative, 
JSON-like syntax with support for imperative JavaScript expressions combined with dynamic property bindings. 


The QML language and engine infrastructure is provided by the Qt QML module. For in-depth information about the QML 
language, please see the Qt QML module documentation . 


The following pages contain more information about QML: 


sm | First Steps with QML - begin using QML with these examples 





a | Cs Creating Qt Quick Projects in Qt Creator 


二 、 创 建 一 个 Qt Quick 应 用 


打开 Qt Creator， 点 击 “ 文 件 一 新 建文 件 或 项 目 ” 菜 单项 ， 然 后 选择 创建 ‘Qt QuickApplication”， 
如 下 图 所 示 。 





乒 
区 New File or Project 


选择 一 个 模板 : Desktop 模板 ~ 


项 目 
Library 
其 他 项 目 
非 Qt 项 目 
导入 项 目 

文件 和 类 
C++ 
Qt 
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Creates a Qt Quick application project 
that can contain both QML and C++ code. 


支持 的 平台 : Desktop 
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4 | 员 
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在 项 目 介 绍 和 位 置 界面 ， 设 置 好 项 目 名 称 和 源码 路 径 ， 注意 路 径 中 不 要 包含 中 文 。 如 下 图 所 
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新 建 Qt Quick 程 序 








项 目 介绍 和 位 置 


This wizard generates a Qt Quick Application project. 


苹 Location 


Component Set 


Kits 
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设 为 默认 的 项 目 路 径 




















下 面 是 选择 Qt Quick 组 件 集 ， 黑 认 是 使 用 Qt Quick Controls 1.3 组 件 集 ，Qt Quick Controls 是 
Qt Quick 通 用 控件 模块 ， 这 个 会 在 后 面 的 内 容 里 重点 讲解 ， 由 于 我 们 初学 Quick， 为 了 不 迷茫 
于 众多 新 名 词 、 新 概念 的 大 海中 ， 这 里 先 不 介绍 这 个 。 我 们 选择 下 面 的 "QtQuick 2.4”， 它 包 
含 了 基本 的 QML 类 型 ，2.4 是 现在 的 版 本 号 。 如 下 图 所 示 。 


Fr 





GG 新 建 Qt Quick 程 序 





Select Qt Quick Component Set 


Locatlom 


四 > Component Set Qt Quick component Set: Qt Quick Controls 
t Buick Controls 1. 
Kits Creates a deployable Qt Quick 2 I be i ; 
汇总 .ui.gml file and uses Qt Quick Cigt Quick Controls 1. 
es that you have installed Qt QulcklQt Quick Controls 1. 
Requires Qt 5.4 or newer. 


Qt Quick 2.3 


Qt Quick 2.2 
Qt Quick 2.1 
Qt Quick 1.1 











选择 ， 这 里 使 用 默认 的 Qt 5.5 版 本 即 可 (如 果 大 家 的 电脑 上 安装 了 多 个 Qt 版 
显示 多 个 选择 ， 因 为 我 们 现在 讲 的 是 Qt 5.5， 所 以 只 选择 这 个 即 可 ) 。 如 下 图 
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| 新 建 Qt Quick 程 序 





Kit Selection 


Locatlom 



















Component Set Qt Creator can use the following kits for project myqgaicK: 


四 > Kits 加 Select all kits 





汇总 
呈 Desktop Qt 5.5.0 MinGW 32bit 详情 





人 Arndroid has not been configeured. Create Androld kits. 详情 忆 























最 后 是 项 目 管理 选项 ， 因 为 我 们 是 单独 的 项 目 ， 也 不 需要 版 本 控制 ， 所 以 直接 点 击 “ 完 成 " 即 
可 。 如 下 图 所 示 。 


| 





© 7at ou 











项 目 管理 
Location 
Component Set 作为 子 项 目 添加 到 项 目 中 : | None> Es 
Fits 添加 到 版 本 控制 系统 0): [Gene> ”| Configure... 
蓝 汇总 
要 添加 的 文件 和 


E:\app\myquick: 


deployment .pri 
main.cpp 
main.qml 
MainForm.ui.qml 
myquick.pro | 到 
qml .qrc - 


Wh 











取消 








项 目 创建 好 以 后 ， 会 自动 在 编辑 模式 显示 main.qml 文件 的 内 容 ， 而 在 左边 项 目 文件 列表 中 分 
类 显示 了 该 项 目 中 的 所 有 文件 。 如 下 图 所 示 。 
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男 main. qml 
. : 1 import QtQuick 2.4 
me 2 import QtQuick.Window 2.2 
4 总 deployment 
品 depl .pri 
, ee oyment.pri 4 4 Window { 
i 5 visible: true 
4 Wh wa 6 4 MalinForm { 
4 | 国 qml.qrc anchors.fill: parent 
4 出 / 4 mouseArea.onClicked: { 
main.qml ot.auit(ys 
MainForm.ui.qml 下 站 } 
12 } 
] } 





我 们 先 来 运行 一 下 这 个 程序 ， 看 下 运行 效果 。 按 下 ctrl+R 快捷 键 ， 或 者 点 击 左下 角 的 绿色 三 

角 运 行 图 标 来 编译 运行 程序 ， 效 果 如 下 图 所 示 。 可 以 看 到 ， 这 是 一 个 最 简单 的 Hello World 程 

序 ， 在 一 个 空白 窗口 中 显 es World" 字 符 串 ， 当 在 窗口 中 点 击 息 标 时 ， 窗 口 会 关闭 ， 程 
序 退 出 。 









Hello World 





三 、QML 文 件 内 容 介 绍 


看 到 了 运行 结果 ， 现 在 我 们 来 简单 看 下 这 个 main.qml 文件 的 内 容 ， 后 级 .qml 表明 这 是 个 
QML 文 件 ， 其 内 容 如 下 : 


// 导入 语句 部 分 

import QtQuick 2.4 
import QtQuick.Window 2.2 
// 对 象 声 明 部 分 


Window { 
Vsiblec Enue 
MainForm { 


anchnorsefilL: parent 
mouseArea.onClicked: { 
Qt .quit( ); 
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正如 这 段 代码 所 示 的 ， 一 个 QML 文 档 定义 了 一 个 QML 对 象 树 ， 由 两 部 分 组 成 : 一 个 import 导 
入 部 分 ， 一 个 对 象 声 明 部 分 。 


import 导入 语句 类 似 于 C++ 中 的 #include， 只 有 导入 了 相关 模块 ， 才 能 使 用 其 中 的 类 型 和 功 
能 。 这 里 导入 了 QtQuick 模 块 ， 这 个 就 是 我 们 前 面 创建 项 目 时 选择 的 组 件 集 ， 它 包含 了 创建 用 
户 界面 所 需要 的 基本 类 型 和 功能 ; 而 QtQuick.window 模块 中 提供 了 Window 类 型 ， 它 可 以 为 Qt 
Quick 场 景 创建 一 个 顶层 窗口 。 


下 面 再 来 看 对 象 声 明 部 分 ，QML 文 档 中 的 对 象 声 明 定义 了 要 在 可 视 场 景 中 显示 的 内 容 。 这 里 
创建 了 两 个 对 象 : Window 对 象 和 其 子 对 象 MainForm 。 对 象 object) 由 它们 的 类 型 (type) 
指定 ， 以 大 写字 母 开 头 ， 后 面 跟随 一 对 大 括号 ， 在 括号 中 包含 了 对 象 的 特性 定义 ， 比 如 这 个 
对 象 的 属性 值 或 者 其 子 对 象 。 最 外 层 的 对 象 叫 根 对 象 ， 比 如 这 里 的 Window ， 在 根 对 象 里 面 定 
义 的 对 象 ， 叫 做 根 对 象 的 子 对 象 ， 比 如 这 里 MainForm 就 是 Window 的 子 对 象 。 在 window 中 
的 visible 是 Window 的 属性 ， 用 来 设置 窗口 是 否 显示 ， 可 以 在 帮助 文档 中 查看 一 个 类 型 的 所 
有 属性 及 用 法 。 

再 来 看 MainForm ， 它 不 是 QtQuick 模块 中 的 类 型 ， 而 是 自 定 义 的 一 个 用 户 界面 表单 (Qt 


Quick Ul Forms) ， 这 是 Qt 5.4 以 后 提出 的 一 个 概念 ， 类 似 于 Qt C++ 编 程 中 的 Ul 文件 ， 大 家 看 
下 左边 文件 列表 里 面 的 MainForm.ui,qml ， 就 是 这 个 文件 ， 如 下 图 所 示 。 









男 main. qml 了 XA mousehrea. onClicked 


import QtQuick 2.4 
import QtQuick.Window 2.2 


4 总 myquick 
myquick.pro 
4 总 deployment 
deployment.prl 











4 Window f 





pe D visible: true 
4 间 资源 MalInEorm { 

4 | 国 qml.qrc anchors.fill: parent 

3 4 mouseArea.onClicked: { 

9 ot.quit(); 

} 
} 
} 


我 们 双击 这 个 文件 ， 这 时 会 自动 跳 转 到 设计 模式 ， 也 就 是 所 谓 的 Qt Quick 设 计 器 。 如 下 图 所 


旬 D2Z 慰 QtQulck 间 人 外 





车 MainForm.uiqml - myauick SC 1 
文件 (日 ”编辑 (E) ”构建 (B) ”调试 (D) Analyze 工具 (T) 控件 (W) ”帮助 (H) 


B+ 口 ] Froperties 





Imports bk 了 Type 
基线 状态 
Type 
id 


十 


一 Geometry 


pr 
0 一 


ly 
= 
和 

= 


360 360 令 
yw Visibility 
Visibility Vv Is Visible Clip 
Dpacity 1.00= 


芒 ousehrea | Layout Advanced 


v Mouse Area 


BaIWasnog 


导航 Mb 


Rectangle 


mouseArea C bb Hello World 
Text 


[a PD- Type to locate (Ctr|+K) 下 2 < 让 应 用 程序 输出 甩 冯 编译 输出 中 an/Ts Console NB 概要 信息 有 BS 














在 设计 器 中 可 以 实现 所 见 即 所 得 的 效果 ， 可 以 弱化 编码 操作 ， 专 心 进行 设计 ， 而 后 在 文件 中 
通过 编码 实现 逻辑 操作 ， 这 样 也 可 以 很 大 程度 地 把 设计 和 逻辑 相 分 离 。Qt 一 直 致 力 于 改进 Qt 
Quick 设 计 器 ， 比 如 现在 这 个 版 本 就 极力 推荐 使 用 设计 器 。 但 是 ， 很 多 特性 在 设计 器 中 还 是 没 
有 办 法 实现 的 ， 依 然 需要 使 用 代码 来 完成 ， 并 且 ， 现 在 实际 工作 中 还 不 是 设计 人 员 与 编码 人 
员 的 完全 分 离 ， 一 般 我 们 还 是 程序 员 一 个 人 来 全 部 搞定 。 所 以 ， 实 际 中 设计 器 用 的 并 不 多 。 


可 以 看 到 设计 器 中 设计 的 界面 就 是 程序 运行 显示 的 界面 ， 现在 我 们 直接 按 下 ctrl+2 快捷 键 ， 
或 者 点 击 “ 编 辑 " 模 式 ， 可 以 看 到 设计 器 中 设计 的 界面 对 应 的 代码 ， 如 下 图 所 示 。 
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[SITE 
| 文件 日” 编辑 (E) 构建 (8) 调式 (D) Analyze 工具 (T) 控件 (W) ”帮助 (H) 
MT GMainForm. ui. danl | 又 Nousehrea 
a i This file should only be edited in Design mode. x 
中 myquick.pro - 党 
4 因 deployment 1 import QtQuick 2.4 
deployment.pri 一 
4 电 源 文件 3 4 Rectangle { 
四 main.cpp 4 property alias mouseArea: mouseArea 
4 荐 资 源 3 
“图 amlarc € width: 360 


“加 / SS 
main.qml height: 360 


MainForm.ui.qml 











kousearea { 
id: mouseArea 
anchors.fill: parent 


} 


Tezt ”| 
anchors.centerIin: parent 
text: "Hello World" 
main.qml 
MainForm.ui.qml 

















在 最 上 面 有 一 行 提示 “This file should only be edited in Design mode”， 就 是 该 文件 只 应 该 在 
设计 模式 中 被 修改 ， 其 实 这 里 是 可 以 直接 修改 代码 的 。 这 里 MainForm.ui.qml 文件 的 内 容 如 
下 


// 导入 语句 
import QtQujick 2.4 


// 根 对 象 是 一 个 矩形 
Rectangle { 
// 声 明 一 个 新 的 mouseArea 属 性 ， 作 为 子 对 象 MouseArea 的 id 属性 的 属性 别名 
property alias mouseArea: mouseArea 
// 定义 矩形 的 宽 和 高 
width 360 
henghnt: 360 


// MouseArea 是 一 个 不 可 见 项 目 ， 为 它 履 盖 的 可 见 项 目 提供 鼠标 处 理 
MouseArea { 
/Vid 属 性 作为 该 对 象 的 标识 ， 在 其 他 地 方 可 以 通过 id 来 引用 该 对 象 
id: mouseArea 
// 这 个 属性 起 到 布局 的 作用 ， 这 里 就 是 填充 整个 父 项 目 
anchnorse fl parent 


} 
//Text 是 文本 项 目 ， 用 来 显示 文本 内 容 
Text { 
// 使 文本 项 目 处 于 父 项 目的 中 心 位 置 
anchors.centerIn: parent 
// 文本 内 容 是 “Hel1o World” 
text: "Hello World" 
} 


这 段 代 码 定义 了 一 个 矩形 项 目 (在 代码 中 ， 从 语法 角度 来 说 Rectangle 是 对 象 ， 但 是 ， 从 界 
面 角度 来 说 ， 叫 对 象 不 合适 ， 我 们 这 里 叫做 项 目 ， 或 者 会 叫做 组 件 ， 由 于 名 词 术语 的 冲突 ， 
统一 把 界面 上 可 视 的 组 件 叫做 项 目 ， 这 个 后 面 深入 讲解 ) ， 然 后 在 矩形 上 面 遮 了 一 个 鼠标 区 
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域 MouseArea ， 这 样 整个 矩形 都 可 以 接受 和 鼠标 操作 了 ， 最 后 在 矩形 的 中 间 放 了 一 个 文本 项 
目 ， 显 示 了 helloworld 字 符 串 。 


这 里 需要 说 明 一 下 ， 在 开始 用 "property alias" 声 明了 一 个 属性 mouseArea ， 在 根 对 象 中 声明 的 
属性 可 以 在 其 他 QML 文 档 中 使 用 ， 而 且 “property alias mouseArea: mouseArea" 后 面 一 

个 mouseArea 表明 了 它 是 子 对 象 MouseArea 的 id 属性 的 属性 别名 ， 也 就 是 说 在 其 他 QML 文 档 
中 操作 mouseArea 属性 ， 就 相 当 于 操作 这 里 的 MouseArea 对 象 。 现 在 再 回 过 头 来 查 

看 main.qml 文件 的 内 容 : 


Window { 
VasaolesErcue 
MainForm { 
anchors. fill: parent 
mouseArea.onClicked: { 
Qt .quit(); 


这 里 的 MainForm 就 是 MainForm.ui.qml 的 一 个 实例 ， 而 在 它 里 面 调用 了 mouseArea 属性 

的 onclicked 事件 处 理 器 ， 这 就 相当 于 调用 了 MainForm.ui.qml 中 的 MouseArea 对 象 

的 onclicked 事件 处 理 器 其 中 Qt.quit() 表明 ， 当 在 整个 矩形 中 点 击 和 鼠标 时 要 执行 的 命令 就 
是 退出 程序 。 


到 这 里 ， 主 要 的 两 个 qml 文件 都 讲解 完了 ， 很 多 读者 应 该 会 感觉 很 乱 ， 新 的 名 词 、 新 的 内 容 
还 是 太 多 ， 不 知 从 何 处 下 手 。 没 有 关系 ， 这 一 篇 中 我 们 只 是 对 创建 的 整个 项 目 内 容 进行 介 
绍 ， 让 大 家 有 个 初步 的 了 解 ， 在 下 一 篇 中 我 们 会 从 最 简单 的 内 容 开始 讲 起 ， 然 后 一 点 点 进行 
扩展 ! 


四 、 其 他 文件 内 容 介 绍 


讲 完了 主要 的 QML 文 件 ， 下 面 我 们 再 来 看 一 下 项 目 中 的 其 他 文件 。 整 个 项 目 中 ， 所 有 的 QML 
文件 是 以 资源 的 形式 放 在 .qrc 文件 中 的 ， 大 家 可 以 猜测 QML 文 件 跟 C++ 源 文件 是 不 同 的 ， 它 
们 并 不 需要 编译 2 而 更 类 似 于 素材 把 下 面 来 看 一 下 main.cpp 文件 的 内 容 。 


#include <QGUuiApplication> 

#include <QQm1ApplicationEngine> 

int main(int argc, char *argv[]) 

{ 
QGUiApplication app(argc, argv); 
QQMIApplicationEngine engine,; 
engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); 
return app.exec(); 


这 个 文件 内 容 很 简单 ， 主 要 就 是 在 主 函 数 中 定义 了 一 个 QQmlApplicationEngine 对 象 ， 并 用 其 
加 载 了 main.qml 文件 。 QQMIApplicationEngine 类 结合 了 QQM1Engine 和 QQMm1Component 两 个 
类 的 功能 ， 提 供 了 一 个 便捷 的 方式 来 加 载 一 个 QML 文 件 ， 但 这 个 QML 文 件 的 所 有 可 视 内 容 必 


须 放 在 window 对 象 中 才能 最 终 显示 出 来 。 对 于 相关 的 内 容 我 们 这 里 不 再 深入 讲解 ， 大 家 现在 
只 需要 知道 ， 以 后 在 main.cpp 文件 中 通过 这 种 方式 来 调用 QML 文 件 即 可 。 


然后 是 myquick.pro 项 目 文件 ， 其 中 就 是 简单 指明 了 程序 的 模板 、 使 用 的 模块 、 源 文件 、 资 源 
文件 等 ， 这 个 与 C++ 项 目 类 似 。 还 有 一 个 deployment.pri 文件， 它 是 项 目 文件 的 补充 内 容 ， 
其 中 指出 了 编译 到 不 同 平台 的 设置 信息 。 这 些 内 容 现 在 我 们 也 不 需要 深入 了 解 ， 这 里 就 不 再 
展开 来 说 了 。 


这 一 篇 中 我 们 从 学 习 新 东西 (或 者 说 新 的 语言 、 新 的 技术 ) 的 最 自然 的 角度 开始 ， 引 领 初学 
者 进入 Qt Quick 编 程 的 大 门 ， 帮 助 初学 者 掌握 学 习 的 技巧 ， 学 习 Qt 的 方式 。 这 也 是 网 络 教程 
与 书籍 的 不 同 之 处 ， 在 《Qt 5 编程 入 门 》 中 我 们 是 以 另外 一 种 方式 讲述 的 ， 读 者 的 喜好 不 同 ， 
可 以 选择 自己 感 兴趣 的 方式 学 习 ， 或 者 两 者 都 学 习 一 下 ! 


该 篇 中 我 们 全 面 讲解 了 Qt Quick 项 目的 所 有 内 容 ， 虽 然 没 有 深入 ， 但 是 让 初学 者 有 了 一 个 感性 
的 认识 ， 这 个 认识 会 在 后 面 的 学 习 过 程 中 逐渐 强化 ， 从 陌生 到 熟悉 ， 最 后 达到 灵活 运用 。 


% Qt Quick 项 目 详解 


导语 


前 面 我 们 一 起 创建 了 一 个 Qt Quick 项 目 ， 并 对 里 面 的 文件 进行 了 简单 的 讲解 ， 虽 然 这 只 是 一 个 
HelloWorld 程 序 ， 但 对 于 没有 Qt Quick 编 程 经 验 的 同学 来 说 ， 这 个 项 目 还 是 有 点 复杂 。 2 
篇 中 ， 我 们 将 从 最 简单 的 QML 文 件 讲 起 ， 然 后 逐渐 丰富 项 目 内 容 ， 帮 助 大 家 由 浅 及 深 的 进 

学 习 ， 进 一 步 了 解 Qt Quick 项 目的 构成 。 


环境 : Windows 7 + Qt 5.5.0+ Qt Creator 3.4.2 


目录 


。 一 、 创 建 空 项 目 
。 二 、 添 加 QML 文 件 
。 三 、 运 行程 序 

e。 四 、 扩 展 QML 程 序 
e@ 五 、 添 加 C++ 代码 
六 、 使 用 资源 文件 


正文 
一 、 创 建 空 项 目 


1、 首 先 打 开 Qt Creator， 然 后 选择 “新 建文 件 或 项 目 ” 菜 单项 ， 在 选择 模板 页 面 选择 “其 他 项 
目 ” 分 类 中 的 “Empty qmake Project*， 我 们 先 来 创建 一 个 空 项 目 ， 后 面 逐 步 往 里 面 添加 文件 。 
点 击 “choose” 按 钮 确定 选择 ， 如 下 图 所 示 。 
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| 
® New File or Project 


选择 一 个 模板 : 


Desktop 模板 了 





项 目 
Application 
Library 
其 他 项 目 
非 Qt 项 目 
导入 项 目 

文件 和 类 


GLSL 
General 


Java 


Python 


< 











国 Qt 单元 met 
几 Qt4 设计 师 证 定义 控件 
包子 目录 项 目 





加 Empty qmake Project 





DD Code Snippet 








Creates a qmake-based project without any 
files. This allows you to create an 
application without ary default classes. 


支持 的 平台 : Desktop 




















2、 在 项 目 位 置 页 面 ， 将 项 目 名 称 修改 为 myqml ， 然 后 选择 好 创建 路 径 。 如 下 图 所 示 。 





| 


EE Empty qmake Project 





苹 Location 


| Kits 
Summary 





Project Location 


This wizard creates ar empty .pro file. 


名 称 : myqml| 























创建 路 径 : E:\app 
本 | 设 为 默认 的 项 目 路 径 














3、 后 面 的 步骤 直接 使 用 默认 设置 即 可 。 


二 、 添 加 QML 文 件 
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1、 创 建 好 的 裤 项 目 只 有 一 个 .pro 项 目 文件 ， 现 在 里 面 的 内 容 也 是 宝 的 。 我 们 先 不 去 管 它 ， 
下 面向 该 项 目 中 添加 文件 。 在 myqml 文件 夹 上 右 击 ， 在 弹出 的 菜单 中 选择 “添加 新 文件 "， 如 下 
图 所 示 。 













MT 二 |e myqml. pro 








“到 myqml | 。 将 "myqml" 设 为 活动 项 目 
ma ee 
执行 qmake 
篇” 运行 
重新 构建 
清除 


添加 新 文件 … 
添加 现 有 文件 .… 








2、 在 弹出 的 新 建文 件 对 话 框 中 选择 Qt 分 类 中 的 “QML File (Qt Quick 2) "一 项 。 如 下 图 所 

示 。 (说 明 一 下 : 这 里 要 添加 QML 文 件 ， 模 板 可 以 选择 Qt Quick 1、Qt Quick 2 和 QtQuickUI 
File 三 种 ，Qt Quick 1 会 导入 QtQuick 1.1 模 块 ， 里 面 的 内 容 都 是 Qt 4 时 代 的 ; 而 QtQuick 2 导入 
的 是 QtQuick 2.0 模 块 ， 是 Qt 5 中 的 新 版 本 ; QtQuick UI 文件 生成 后 会 默认 使 用 设计 器 ， 因 为 
我 们 这 一 节 直 接 讲 代码 ， 不 涉及 设计 器 的 内 容 ， 所 以 不 选择 这 个 模板 。 其 实 ， 使 用 哪个 模板 
都 一 样 ， 因 为 到 文件 里 面 可 以 直接 修改 导入 模块 语句 ， 初 学 者 在 这 里 不 要 纠结 。) 















































[a 
同 新 建文 件 
选择 一 个 模板 : Desktop 模板 
文件 和 类 0 Qt 设计 师 异 面 类 Creates a QML file with boilerplate code, 
二 让 D Qt Designer Form starting with “import QtQuick 2.0”. 
黑莓 D Qt Resource File 支持 的 平台 : Desktop 
Qt | QML File (Qt Quick 1) 
GLSL | QML File (Qt Quick 2) 
General DD QtQuick UI File 
Java D JS File 
Python 
4 mn ' 
i 














3、 下 面 设置 文件 的 名 称 为 main ， 路 径 保持 默认 即 可 ， 现 在 的 路 径 就 是 项 目 源码 路 径 。 然 后 
点 击 “ 下 一 步 "按钮 ， 如 下 图 所 示 。 
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J QML File (Qt Quick 2) 








Location 
> Location 
Summary 名 称 : main 
路 径 : 了 :vappmyqml 浏览 ... 

















4、 最 后 是 项 目 管理 页 面 ， 可 以 看 到 ， 新 创建 的 文件 默认 添加 到 了 myqml.pro 项 目 中 ， 直 接点 
击 “ 完 成 "按钮 完成 文件 的 添加 建 ， 如 下 图 所 示 。 


乒 





@ 0 om le Qt Quidey 





Project Management 
Location 


车 summary 添加 到 项 目 p) [aa "| 
添加 到 版 本 控制 系统 WW: [one> 7 [Configwe.| 








戎 添加 的 文件 
E:\app\myqml\main.qml: 

















、 运 行程 序 


1、 可 以 看 到 添加 的 文件 就 是 main.qml ， 后 级 .qml 表明 该 文件 是 一 个 QML 文 件 ， 其 内 容 如 
下 。 
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男 main. qml 





4 as 四 ] import QtQuick 2.0 
I ， 
4 | ML 
本 oe 4 Rectangle { 
4 width: 100 
height: 62 
} 
import QtQuick 2.0 
Rectangle { 
width: 100 
hezght62 
} 
这 是 一 个 最 简单 的 QML 文 件 ， 它 会 显示 一 个 宽 100 像 素 高 62 像 素 的 矩形 。 这 里 的 import 语句 


上 一 节 已 经 提 到 过 了 ， 它 会 导入 相应 的 模块 ， 比 如 这 里 导入 了 QtQuick 2.0 模 块 。 下 面 
的 Rectangle 是 矩形 对 象 ， 用 来 定义 一 个 抵 形 项 目 〈 项 目 类 似 于 C++ 中 的 窗口 或 者 部 件 ) ， 里 
面 的 width 和 height 是 Rectangle 的 属性 ， 用 来 设置 矩形 相关 参数 。 


2、QML 文 件 与 C++ 文件 是 不 同 的 ， 它 不 需要 进行 编译 ， 可 以 直接 运行 。 在 Qt 中 提供 了 两 个 运 
行 QML 文 件 的 工具 qmlviewer 和 qmlscene， 前 者 是 Qt 4 时 代 的 产物 ， 主 要 用 来 显示 导入 了 
QtQuick 1.1 模 块 的 QML 文 件 ， 而 qmlscene 用 来 显示 导入 了 QtQuick 2.0 以 后 版 本 的 QML 文 
件 。 选 择 “ 工 具 一 外 部 一 QtQuick 一 Qt Quick 2Preview” 菜 单项 即 可 在 qmlscene 中 显示 现在 打开 
的 QML 文 档 的 内 容 。 如 下 图 所 示 。 


控件 (W) ”帮助 (H) 






























巾 Locate.… Ctrl+K 
C++(C) 过 
书签 (B) 
粘贴 代码 ( 〇 ) 
Text Editing Macros 上 
QML/JS » 
Form Editor » 
外 部 (E) , Qt Quick Qt Quick 1 Preview (qmlviewer) 
Diff... Qt 语言 家 Qt Quick 2 preview (qmlscene) 
选项 (O).. 
[| | Configure... 


运行 效果 如 下 图 所 示 。 
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四 、 扩 展 QML 程 序 
1、 添 加 文本 显示 


可 以 看 到 现在 的 程序 就 是 一 个 空白 的 窗口 ， 什 么 都 没有 。 下 面 我们 来 扩展 该 程序 ， 
将 main.qml 文件 的 内 容 更 改 如 下 : 


Import QtQujick 2.0 
Rectangle { 
width: 100 
height:62 
Text { 
text a hedlo wormlLds 
} 


里 添加 了 一 个 Text 对 象 ， 它 用 来 显示 一 块 文本 ， 其 text 属性 用 来 指定 要 显示 的 文本 内 


这 
容 。 下 面 先 按 下 ctrl+s 快捷 键 保 存 该 文件 ， 然 后 在 qmlscene 中 查看 显示 效果 ， 如 下 图 所 示 。 





ello World 











2、 使 用 错 布 局 


我 们 看 到 现在 可 以 显示 hello world 文 本 了 ， 但 是 文本 默认 显示 在 了 左上 角 ， 我 们 希望 它 可 以 在 
窗口 中 间 显 示 ， 下 面 继续 添加 代码 : 


Texto{ 
Eext oo hemo world, 
anchnonsscenterin: parent 


} 


这 里 使 用 了 anchor 锚 的 概念 进行 了 布局 ， 在 QML 中 每 一 个 项 目 都 有 一 组 无 形 的 锚 ， 分 别 在 
上 、 下 、 左 、 右 、 中 心 等 处 ， 它 们 可 以 定义 项 目 自身 和 其 他 项 目的 相对 位 置 。 比 如 这 里 

的 centerIn 就 是 指 Text 项 目 在 parent 项 目的 中 心 ， 这 里 的 parent 就 是 指 Text 的 父 项 

目 Rectangle 。 在 anchor 后 面 一 般 指定 其 他 项 目的 id ， 如 果 是 父子 项 目 ， 也 可 以 像 现 在 这 
样 指 定 parent ° 


下 面 先 保存 代码 ( 以 后 每 次 修改 都 需要 保存 后 才能 显示 ， 后 面 不 再 提醒 ) ， 然 后 在 qmlscene 
中 运行 ， 效 果 如 下 图 所 示 。 





hello World 








3、 添 加 鼠标 互动 。 


前 面 的 代码 已 经 完成 了 一 个 简单 的 Hello World 界 面 ， 下 面 我 们 添加 代码 实现 点 击 界 面 退 出 程 
序 的 效果 : 


import QtQuick 2.0 
Rectangle { 


width: 100 
height: 62 
Text { 


Eext nn nelto Worlds 
anchors.centerIn: parent 


} 


MouseArea { 
anchors.fill: parent 
onClicked: { 


Qt .quit() 


我 们 在 Rectangle 中 又 添加 了 一 个 MouseArea 子 对 象 ， 这 个 从 字面 上 翻译 就 是 鼠标 区 域 ， 它 是 
一 个 不 可 见 的 项 目 ， 就 是 说 我 们 在 窗口 上 并 不 能 看 到 它 的 存在 ， 通 过 该 对 象 可 以 实现 鼠标 互 
动 。 anchors.fill 是 进行 填充 ， 这 里 就 是 将 鼠标 区 域 才 盖 整个 Rectangle 窗 

口 。 onclicked 其 实 就 是 Qt C++ 中 的 信号 处 理 函 数 ， 这 里 一 般 叫 做 信号 处 理 器 ， 其 语法 

是 on<signal> ， 所 以 这 里 就 是 clicked 单 击 信号 的 处 理 ， 当 在 窗口 上 单 击 息 标 后 会 执 

行 Qqt.quit() 函数 ， 这 是 个 全 局 函数 ， 执 行 结果 就 是 使 程序 退出 。 


大 家 可 以 在 qmlscene 中 运行 程序 ， 然 后 在 窗口 上 点 击 和 鼠标 查看 运行 效果 。 


4、 使 用 组 件 


A NA 产 ;| TI 厂 日 了 闻名 如 
牛 03 局 Qt QUIck 项 目 作 局 


前 面 创建 的 是 main.qml 文件 ， 本 意 是 让 其 作为 主要 文件 ， 成 为 程序 的 入 口 。 但 是 如 果 按照 现 
在 的 做 法 ， 程 序 越 写 越 复 杂 ， main,qml 的 内 容 会 越 来 越 多 ， 越 来 越 乱 。 为 了 避免 
在 main.qml 中 添加 过 多 的 代码 ， 我 们 一 般 将 具体 的 实现 代码 放 到 单独 的 文件 中 。 


下 面 首先 在 QML 目 录 中 添加 新 文件 ， 如 下 图 所 示 。 





“mam in 
咒 myqml.pro 
| 卉 ,QML | 


图 main main 











Add Existing Directory... 
Find in This Directory... 


折 秋 全 部 








模板 依然 选择 Qt 分 类 中 的 QML File (QtQuick 2) ， 文 件 名 称 设 置 为 MyHelloworld ， 请 注意 首 
字母 要 大 写 ， 如 下 图 所 示 。 


|s 





J QML File (Qt Quick 2) 








Location 
E> Location 
Summary 名 称 : NyHelloWorld 
路 径 : E:\app\mygml 浏览 ... 

















添加 完成 后 ， 将 main.qml 中 的 内 容 全 部 复制 粘贴 过 来 ， 如 下 图 所 示 。 
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园 MyHelloWorld. aml* 


“ Re 1 import QtQuick 2.0 
I y' 
4 QML 3 
司 a 4 Rectangle { 


width: 100 


豆 MyHelloWorld.qml 
aiaiiasiam height: 62 


4 Text 1{ 

8 text: "hello World"| 
: anchors .CenterIn: parent 

17 } 

4 MouseArea { 

] anchors .fil1: parent 
4| 4 onClicked: { 
ot.quit() 

main.qml } 
MyHelloWorld.qml* } 
myqml.pro } 


下 面 我 们 修改 main.qml 文件 的 内 容 如 下 : 


import QtQuick 2.0 
Item { 
MyHelloworld { 
anchors. filLl: parent 
} 


} 


像 这 样 在 一 个 单独 文档 中 的 QML 代 码 段 ， 就 定义 了 一 个 对 象 类 型 ， 它 也 叫做 组 件 ， 这 个 文件 
的 名 称 必须 以 大 写字 母 开头 。 比 如 这 里 创建 了 一 个 MyHelloworld 类 型 ， 在 其 他 QML 文 件 中 可 
以 直接 使 用 同一 目录 下 自 定义 的 对 象 类 型 ， 所 以 ， 我 们 在 main.qml 中 直接 创建 

了 MyHelloworld 对 象 。 这 里 根 对 象 使 用 了 Item ， 在 Qt Quick 中 ， 所 有 可 视 项 目 都 继承 

自 Item ， 因 为 在 main.qml 中 我 们 只 需要 创建 一 个 窗口 ， 不 需要 进行 内 容 设置 ， 所 以 一 般 使 
用 Item 即 可 ， 当 然 ， 如 果 想 使 用 Rectangle 等 也 是 可 以 的 。 


使 用 组 件 除 了 可 以 简化 代码 外 ， 更 重要 的 是 它 可 以 被 重复 使 用 ， 如 果 在 一 个 代码 中 需要 多 次 
使 用 相同 的 部 件 或 者 功能 ， 将 它们 作为 组 件 就 没 必要 多 次 编写 相同 的 代码 了 。 大 家 可 以 保存 
文件 后 在 qmlscene 中 运行 程序 ， 查 看 效果 。 

5、 id 属性 和 属性 别名 


前 面 提 到 过 id 属性 ， 其 实 它 就 是 一 个 对 象 的 名 字 ， 来 唯一 确定 一 个 对 象 ， 在 其 他 对 象 中 可 以 
通过 id 引用 该 对 象 。 下 面 我 们 将 MyHelloworld.qml 文件 的 内 容 更 改 如 下 : 


import QtQujick 2.0 
Rectangle { 
width: 100 
height: 62 
property alias mArea: mouseArea 
Text { 
text nedlomworld, 
anchorsecenterIine narent 


MouseArea { 


id: mouseArea 
anchorss fatt narent 


} 


这 里 我 们 首先 更 改 了 MouseArea 对 象 ， 设 置 其 id 为 mouseArea ， 这 样 就 可 以 在 Rectangle 中 
通过 mouseArea 来 访问 MouseArea 对 象 为 了 可 以 在 MyHelloworld.qml 文件 外 访 

问 Rectangle 内 的 子 对 象 ， 我 们 需要 在 Rectangle 中 自 定义 属性 ， 并 且 该 属性 需要 是 子 对 象 的 
属性 别名 ， 例 如 这 里 我 们 声明 了 一 个 mArea 属性 ， alias 表明 mArea 是 mouseArea 的 别名 ， 
这 样 在 MyHelloworld.qml 文件 外 就 可 以 通过 mArea 来 操作 MouseArea 对 象 了 有 


下 面 我 们 修改 main.qml 文件 : 


import QtQuick 2.0 
Item { 
MyHelloworld { 
anchors.fill: parent 


mArea.oncClicked: { 
Qt .quit() 


这 里 直接 在 MyHelloworld 对 象 中 通过 mArea 调用 了 onclicked 处 理 器 。 现 在 保存 文件 ， 然 后 
通过 qmlscene 运行 程序 ， 查看 效果 & 


到 这 里 我 们 已 经 基本 还 原 了 上 一 篇 中 创建 的 Qt Quick 应 用 中 qml 文件 的 内 容 ， 从 最 简单 的 程 
序 开 始 ， 逐 渐 丰 富 代码 ， 现 在 大 家 应 该 已 经 对 QML 程 序 有 了 一 定 的 认识 。 下 面 我 们 继续 丰富 
程序 ， 使 其 成 为 一 个 可 以 编译 运行 的 项 目 。 


五 、 添 加 C++ 代码 


1、 添 加 main.cpp 文件 。 首 先 在 myqml 目录 上 右 击 ， 选 择 “ 添 加 新 文件 *"， 如 下 图 所 示 。 在 弹出 
的 对 话 框 中 选择 C++ 分 类 中 的 “C++Source File”。 
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myqml| 将 "myqm|" 设 置 为 活动 项 目 
4 A QML 构建 

mall 执行 qmake 

Myh 部 雯 
区 ”运行 


重新 构建 
清除 


添加 新 文件 . 


乏 加 坝 有 文件 … 
Add Existing Directory... 
新 子 项 目 .… 








2、 文 件 名 称 设置 为 main ， 如 下 图 所 示 。 


Ig 





D C++ Source File 





Location 


本 Location 
Summary 名 称 : main| 

















3、 添 加 完成 后 将 main.cpp 文件 的 内 容 修 改 为 : 


#include <QGuiApp1Lication> 
#include <QQm1ApplicationEngine> 
Tntemarnm(unt argqe cnare argvll) 


{ 
QGUiApplication app(argc, argv); 
QQM1IApplicationEngine engine; 
engine.load(QUrl(QStringLiteral("../myqml/main.qml"))); 
return app.exec(); 

} 
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这 里 主要 就 是 普通 的 Qt C++ 中 main() 函数 ， 关 键 是 其 中 创建 了 QQmlApplicationEngine 对 外 
来 加 载 QML 文 件 ， 这 个 是 固定 的 用 法 。 因 为 现在 编译 运行 程序 的 本 地 目录 是 自动 生成 的 目 
录 ， 它 与 myqml 源码 目录 是 同 级 目录 ， 所 以 加 载 main.qml 文件 需要 指定 相对 路 径 。 


2、 更 改 项 目 文件 。 现 在 在 myqml.pro 文件 中 已 经 自动 添加 了 一 些 代 码 ， 我 们 只 需 在 最 后 添加 
一 名 代码 : 


QT += quick qml 


这 样 就 表明 项 目 中 使 用 了 QtQuick 和 QtQeml 模块 。 


3、 修 改 main.qml 文件 。 要 在 C++ 程序 中 使 用 QQM1IApplicationEngine 加 载 QML 文 件 ， 要 求 顶 
层 窗 口 使 用 window 项 目 ， 就 是 在 main.qml 中 的 根 对 象 使 用 window 对 象 来 代替 Item 对 象 ， 
因为 window 默认 是 不 显示 的 ， 所 以 还 有 设置 其 visible 属性 为 true ， 这 个 也 是 固定 用 法 ， 
大 家 以 后 照 着 做 即 可 。 修 改 后 的 main,.dqml 文件 如 下 : 


Import QtQujick 2.0 
import QtQuick.Window 2.0 
Window { 
visible: true 
MyHelloworld { 
anchors.fil1: parent 
mArea.onClicked: { 
Qt .quit() 


还 导入 了 QtQuick.Window 2.0， 这 是 因为 该 模块 包含 了 window 类 型 。 现 在 我 们 可 以 按 
i. Ctrl+R 快捷 键 来 编译 运行 程序 了 ， 效 果 如 下 图 所 示 。 





hello World 














六 、 使 用 资源 文件 


因为 QML 文 件 是 普通 的 文本 文件 ， 但 在 程序 运行 时 需要 使 用 这 些 文件 来 创建 界面 ， 将 其 直接 
放 在 程序 外 是 不 安全 的 ， 所 以 我 们 的 做 法 是 将 QML 文 件 放 到 资源 文件 中 。 
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1、 添 加 资源 文件 。 继 续 在 myqml 目 录 上 右 击 ， 选 择 添加 新 文件 ， 模 板 选择 Qt 分 类 中 的 “Qt 


Resource File”， 如 下 图 所 示 。 



































| 
加 新 建文 件 | 
选择 一 个 模板 : Desktop 模板 
文件 和 类 D Qt 设计 师 寞 面 类 Creates a Qt Resource file (. qrc). 
C++ 0D Qt Designer Sl 支持 的 平台 : Desktop 
黑莓 日 Qt Resource File 
Qt 口 QML File (Qt Quick 1) 
GLSL 0D QML File (Qt Quick 2) 
General 0D QtQuick UI File 
Java Dsle 
Python 























然后 将 文件 名 称 设置 为 qml”， 如 下 图 所 示 。 





EE 


J Qt Resource File 





Location 
> Location 





Summary 名 称 : aml 


路 径 : 了 : Vapi Amyqm1 

















2、 文 件 创建 好 之 后 会 自动 打开 ， 这 里 我 们 先 点 击 “ 添 加 "按钮 ， 选 择 “ 添 加 前 级 ”"， 如 下 图 所 示 。 


438 


第 53 篇 Qt Quick 项 目 详解 











这 里 将 前 级 设置 为 / ， 如 下 图 所 示 。 (其 实 前 级 使 用 什么 都 可 以 ， 这 里 为 了 简便 ， 只 保留 余 
杠 ) 


属性 


@ > 





前 纺 : 7 


在 弹出 的 对 话 框 中 ， 选 择 源码 目 录 中 所 有 的 QML 文 件 ， 如 下 图 所 示 。 完 成 后 点 击 ctrl+s 保存 
资源 文件 。 
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第 53 篇 Qt Quick 项 目 详解 





「 区 打开 文件 


(已 上 ds Se ”| 好 || 区 甘 myqim/ 











‘gitignore | MyHellowW myqml.pr 


orld O.User 


忽 WIN7 (C:) 

Gs Software (D:) 

Ea Work (E:) 

EE 存储 合 库 (H:) 

遇 Qt 深入 趟 |inux 于 





文件 名 (N): "MyHelloWorld" "main" 











myqml.pro main.qml 
4 甩 源 文件 MyHelloWorld.qml 
er main.cpp 
4 区 资源 
4 qml,qrc 
a 号/ 
main.qml 
MyHelloWorld.qml 
4 辐 QML 
main.qml 
MyHelloWorld.qml 


5、 因 为 已 经 在 资源 文件 中 添加 了 QML 文 件 ， 所 以 以 前 在 项 目 中 的 QML 文 件 就 不 再 需要 了 。 双 
击 打 开 myqml.pro 文件 ， 然 后 将 其 中 的 : 


DISTFILES += \ 
main.gqml \ 
MyHelloworld.qml 


代码 删除 掉 ， 点 击 ctrlts 保存 项 目 文 件 。 这 时 项 目 中 的 文件 列表 如 下 图 所 示 。 
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| myaml. pro 





4 一 1 SOURCES += \ 
品 myqml.pro main.c 
4 甩 源 文件 i 
er main.cpp a - 
人 4 QT += quick qml 
4 qml.qrc 
加/ RESOURCES += \ 
图 main.qml 1 qml.qrc 


图 MyHelloWorld.qml 8 | 





6、 最 后 修改 main.cpp 文件 。 因 为 现在 使 用 了 资源 文件 ， 所 以 要 更 改 main.cpp 文件 中 QML 文 
件 的 路 径 ， 将 其 修改 为 : 


engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); 


到 这 里 整个 项 目 就 修改 完成 了 ， 大 家 可 以 运行 程序 ， 查 看 效果 。 这 个 项 目 将 作为 我 们 的 模 
板 ， 后 面 的 章节 会 在 这 个 项 目的 基础 上 进行 修改 来 讲解 ， 项 目的 创建 过 程 就 不 再 歼 述 。 


这 一 篇 中 我 们 将 上 一 篇 讲解 的 Qt Quick 项 目 进行 拆 解 分 析 ， 以 初学 者 的 角度 ， 从 最 简单 的 几 行 


可 以 从 根本 上 掌握 Qt Quick 程 序 的 构建 ， 并 且 也 提供 了 一 种 学 习 的 方法 ， 一 种 分 析 大 型 复杂 程 
序 的 方法 ， 就 是 所 谓 的 剖析 法 ， 希 望 大 家 用 心 过 一 遍 ， 为 以 后 的 学 习 打 好 基础 。 


